Fork me on GitHub

react 基础知识

字数统计: 3.8k字   |   阅读时长≈ 18分

react项目创建

1、创建项目

1
2
3
npx create-react-app my-app
cd my-app
npm start

2、组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import React,{useState,useEffect,useRef} from 'react';//任何组件必须引入react
//函数组件
//组件名称大写开头
function App(props){
    //响应式数据
    let [menuList,setMenuList] = useState([]);
    let myRef = useRef(null);
    //类似于生命周期函数
    useEffect(() => {
        console,log('ul 元素DOM',myRef.current);
        React.axios({
            url:'/menu/getMenuList',
            // method:'GET'
        }).then(res=>{
            if(res.data.data.length){
                setMenuList(res.data.data)
            }
        })
        return () => {
            
        };
    },[]);
    return(
    	<div>
        	我是组件App
        	<ul ref = {myRef}>
        	{
        		menuList.length && menuList.map(ele=>{
        			//key 只是在兄弟节点之间必须唯一
        			return <li key={ele.id}>{ele.title}</li>
        		})
        	}
            </ul>
        
        </div>
    )
}

//class组件
class Test extends React.Component {
    constructor(props) {
        super(props);
        //局部响应式数据
        this.state = {a:'Test'};
        // 为了在回调中使用 `this`，这个绑定是必不可少的
        this.test1 = this.test1.bind(this);
    }
    //生命周期钩子函数
    componentDidMount() {
  		console,log('div 元素DOM',this.refs.myRef);
    }
    //正常写法
    test1(a){
        this.setState({a})
    }
    //这是 *实验性* 语法。
    test2 = (a,e)=>{
        this.setState({a})
    }
    render(){
        
        
        return(
            <>
        	<div ref = 'myRef' onClick={this.test1.bind(this, 'xxx')}>我是组件{a}</div>
        	<div onClick={(e)=>this.test2('xxx',e)}>我是组件{a}</div>
		   </>
        )
    }
}


//两种组件可以相互嵌套使用，组件还能被作为参数传入

3、表单元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '请撰写一篇关于你喜欢的 DOM 元素的文章.'
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
    //不确定键名时
    let name = event.target.name
    this.setState({
      [name]: value
    });
  }

  handleSubmit(event) {
    alert('提交的文章: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          文章:
          <textarea value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

4、路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//import { BrowserRouter as Router, Switch, Route,Link } from 'react-router-dom';
<Layout className="pageContent">
    //根路由
    <Router >
            <Layout >
            <Header style={{padding:'0'}}>
                <Head menuList={menuList}/>
            </Header>
            <Content>
                	//switch只会渲染匹配到的第一个子元素
                    <Switch >
                        <Route  path="/setup" component={SetUp}/>
                        <Route  path="/article" component={Article}/>
                        <Route  path="/articledetail" component={ArticleDetail}/>
                        <Route  path="/toPersonInfo" component={PersonInfo}/>
                        //exact 路由严格匹配
                        <Route  exact path="/" component={Article} />
                        <Route  component={NotFound} />
                    </Switch>
            </Content>
            <Footer>
                <Foot  />
            </Footer>
        </Layout>
        <Sider>
                <Route   component={Login}  dispatch = {dispatch} /> 
        </Sider>
    </Router>  

</Layout>

1、路由传参

  1. link标签

    1
    2
    3
    4
    5
    6
    7
    // 页面刷新存在 参数回显到地址栏 类似于get请求 不能传过大的数据
    pathname + search
    //A页面
    <Link to={{pathname: '/setting', search:'id=1'}}>jump --- search</Link>

    //B页面取参
    this.props.history.location.search
    1
    2
    3
    4
    5
    6
    7
    // 页面刷新不存在 参数不回显到地址栏 
    pathname + 任意值
    //A页面
    <Link to={{pathname: '/setting', abc:'id=1'}}>jump --- search</Link>

    //B页面取参
    this.props.history.location.abc
    1
    2
    3
    4
    5
    6
    7
    // 页面刷新存在 参数不回显到地址栏 
    pathname + state
    //A页面
    <Link to={{pathname: '/setting', state:{'id':1}}}>jump --- search</Link>

    //B页面取参
    this.props.history.location.state
    1
    2
    3
    4
    5
    6
    7
    8
    // 动态路由后面加?表示可选，不加表示必选
    <Route path="/setting/:id?" component={Setting} />
    //A页面
    let id = 1;
    <Link to={{pathname: `/setting/${id}`}}>jump --- params</Link>
    // 取参
    //B页面
    this.props.history.match.params.id

    注意【state 传参的方式只支持Browserrouter路由，不支持hashrouter】

  2. 试试

Hooks

useRef

  • 存储 timeout ID
  • 存储和操作 DOM 元素
  • 存储不需要被用来计算 JSX 的其他对象。

如果你的组件需要存储一些值，但不影响渲染逻辑，请选择 ref。

遵循这些原则将使你的组件更具可预测性：

  • 将 ref 视为脱围机制。当你使用外部系统或浏览器 API 时，ref 很有用。如果你很大一部分应用程序逻辑和数据流都依赖于 ref，你可能需要重新考虑你的方法。
  • 不要在渲染过程中读取或写入 ref.current。 如果渲染过程中需要某些信息，请使用 state 代替。由于 React 不知道 ref.current 何时发生变化，即使在渲染时读取它也会使组件的行为难以预测。（唯一的例外是像 if (!ref.current) ref.current = new Thing() 这样的代码，它只在第一次渲染期间设置一次 ref。）

React state 的限制不适用于 ref。例如，state 就像 每次渲染的快照，并且 不会同步更新。但是当你改变 ref 的 current 值时，它会立即改变：

1
2
3
ref.current = 5;

console.log(ref.current); // 5

这是因为 ref 本身是一个普通的 JavaScript 对象， 所以它的行为就像对象那样。

当你使用 ref 时，也无需担心 避免变更。只要你改变的对象不用于渲染，React 就不会关心你对 ref 或其内容做了什么。

React 不允许组件访问其他组件的 DOM 节点。甚至自己的子组件也不行！

1
2
3
4
5
6
7
8
const inputRef = useRef(null);

function MyInput(props) {
  console.log(1,props)
  return <input {...props} />;
}

<MyInput ref={inputRef} />

forwardRef API

使用 forwardRef 后可以解决上面问题

1
2
3
const MyInput = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});

useState

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
创建一个响应式数据

eg1

import React, {useState} from 'react'

const LinkButton = ()=> {
    const [ like, setLike ] = useState(0);
    
    return (
    	<button onClick = {()=> {setLike(like + 1)}}>
        	{like}👍
        </button>
    )
}

eg2

import React, { useState} from 'react'

const LinkButton = ()=> {
    const [ obj, setObj ] = useState({like: 0, on: true});

    return (
    	<>
            <button onClick={()=> { setObj({...obj, like: obj.like + 1}) }}>
                {obj.like}👍
            </button>
            <button onClick={()=> { setObj({...obj, on: !obj.on}) }}>
                {obj.on? 'On': 'Off'}
            </button>
        </>
    )
}

useEffect

​ Effect 是 React 范式中的一种脱围机制。它们让你可以 “逃出” React 并使组件和一些外部系统同步，比如非 React 组件、网络和浏览器 DOM。如果没有涉及到外部系统（例如，你想根据 props 或 state 的变化来更新一个组件的 state），你就不应该使用 Effect。移除不必要的 Effect 可以让你的代码更容易理解，运行得更快，并且更少出错。

清除副作用函数一般伴随这第二数组参数依赖，每次依赖发生变化时就会触发清除副作用函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
渲染后执行某操作
import React, {useEffect, useState} from 'react'

// 初始化，更新时调用
const LinkButton = ()=> {
    const [ obj, setObj ] = useState({like: 0, on: true});
    useEffect(()=> {
        document.title = `点击了${obj.like}次`
    })
    return (
    	<>
            <button onClick={()=> { setObj({...obj, like: obj.like + 1}) }}>
                {obj.like}👍
            </button>
            <button onClick={()=> { setObj({...obj, on: !obj.on}) }}>
                {obj.on? 'On': 'Off'}
            </button>
        </>
    )
}

// 清除副作用

const MouseTracker () => {
    const [ positions, setPositions] = useState({x: 0, y: 0});
    useEffect(()=> {
        const updateMouse = (e) => {
            setPositions({x: e.clientX, y: e.clientY})
        }
        document.addEventListener('click', updateMouse)
        // 清除副作用（每次更新都会再次绑定事件）
        reutrn () => {
            // 每次执行后在此清除副作用
            document.removeEventKistener('click', updateMouse)
        }
    })
}

// 随机狗狗图片
接口： https://dog.ceo/api/breeds/image/random
返回值：{"message":"https:\/\/images.dog.ceo\/breeds\/sheepdog-english\/n02105641_2138.jpg","status":"success"}

import React,{ useEffect, useState } from 'react'

const DogShow = () => {
    const [url, setUrl] = useState('');
    const [loading, setLoading] = useState(true)
    useEffect(() => {
        fetch('https://dog.ceo/api/breeds/image/random')
        .then((res)=> res.json())
        .then(res=> {
            console.log(res);
            if(res) {
                setUrl(res.message)
            }

        })
        .finally(()=>{
            setLoading(false)
        })
        return () => {
            
        };
       // 下面可以添加依赖，只有依赖变化才执行。如果依赖为空则只执行一次
       // 不写依赖，则 执行setUrl 又会触发更新，无限循环
    }, []);
    return (
        <>
            {
                loading? '🐕读取中': <img src={url} />
            }
        </>
    )
}


useCallback

useCallback 是一个允许你在多次渲染中缓存函数的 React Hook。**useCallback 缓存函数本身**。不像 useMemo，它不会调用你传入的函数。相反，它缓存此函数。从而除非 productId 或 referrer 发生改变，handleSubmit 自己将不会发生改变。

1
const cachedFn = useCallback(fn, dependencies)
1
2
3
4
5
6
7
8
9
10
import { useCallback } from 'react';

function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);
  // ...

如果你已经熟悉了 useMemo，你可能发现将 useCallback 视为以下内容会很有帮助：

1
2
3
4
5
6
7
// 在 React 内部的简化实现

function useCallback(fn, dependencies) {

  return useMemo(() => fn, dependencies);

}

useMemo

useMemo 是一个 React Hook，它在每次重新渲染的时候能够缓存计算的结果。

useMemo 缓存函数调用的结果。

1
const cachedValue = useMemo(calculateValue, dependencies)
1
2
3
4
5
6
import { useMemo } from 'react';

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

你需要给 useMemo 传递两样东西：

  1. 一个没有任何参数的 calculation 函数，像这样 () =>，并且返回任何你想要的计算结果。
  2. 一个由包含在你的组件中并在 calculation 中使用的所有值组成的 依赖列表。

随后每次渲染 react 都会 对比前后依赖项是否相同？无变化则返回缓存的值

*默认情况下，当一个组件重新渲染时，React 会递归地重新渲染它的所有子组件。这时候可以使用 useMemo和useCallback 避免不必要的渲染

自定义hook

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 猫猫图片
接口： http://api.thecatapi.com/v1/images/search?limit=1&category_ids=



// 获取鼠标的位置
const useMousePosition () => {
    const [ positions, setPositions] = useState({x: 0, y: 0});
    useEffect(()=> {
        const updateMouse = (e) => {
            setPositions({x: e.clientX, y: e.clientY})
        }
        document.addEventListener('mousemove', updateMouse)
        // 清除副作用（每次更新都会再次绑定事件）
        reutrn () => {
            // 每次执行后在此清除副作用
            document.removeEventKistener('mousemove', updateMouse)
        }
    })
    return positions
}

// 封装狗狗图片
const useURLLoader = (url)=> {
    const [url, setUrl] = useState('');
    const [loading, setLoading] = useState(true);
    useEffect(() => {
        fetch(url)
            .then(res=> res.json())
            .then(res=> {
            	setUrl(res.message)
            	setLoading(false)
            })
    }, [url])
    return [url, loading]
}

// 使用

const DogShowHook = () => {
    const { url, loading } = useURLLoader('https://dog.ceo/api/breeds/image/random')
    let style = {}
    return (
        <>
        	{loading ? <p>读取🐕中</p>: <img src={url} alt="dog" style={style} />}	
        </>
    )
}

Hook 规则

1
2
3
4
1、只在最顶层使用 Hook
2、只在 React 函数 中使用 Hook

拓展： useHooks.com

HOC - Higher order component

1
2
高阶组件： 一个函数，接收一个组件作为参数，返回一个新的组件

userReduce

commonContext.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/*
 * @Description: 全局状态管理
 * @Author:  
 * @Date: 2023-05-31 10:20:39
 * @LastEditTime: 2023-05-31 11:15:09
 * @LastEditors:  
 */
import { createContext, useContext, useReducer } from 'react'

const UserInfoContext = createContext(null);
const UserInfoDispatchContext = createContext(null);

const initUserInfo = {
    age: "",
    gender: "",
    hobbies: [],
    intro: "",
    name: "",
    occupation: ""

};

// eslint-disable-next-line react/prop-types
export function ContextProvider ({ children }) {
    const [userinfo, dispatch] = useReducer(userInfoReducer, initUserInfo)

    return (
        <UserInfoContext.Provider value={userinfo}>
            <UserInfoDispatchContext.Provider value={dispatch}>
                { children }
            </UserInfoDispatchContext.Provider>
        </UserInfoContext.Provider>
    )
}

export function useUserInfo() {
    return useContext(UserInfoContext);
}

export function useUserInfoDispatch() {
    return useContext(UserInfoDispatchContext);
}

function userInfoReducer(userInfo, action) {
    console.log(userInfo, action);
    const { type, ...payload } = action;
    switch(type) {
        case "add": {
            return {
                ...useUserInfo,
                ...payload
            }
        }
            
        default: {
            throw Error('未知操作：' + action.type);
          }
    }
}

main.js

1
2
3
4
5
6
7
8
9
import { ContextProvider } from './utils/commonContext'

ReactDOM.createRoot(document.getElementById('root')).render(
  // <React.StrictMode>
  <ContextProvider>
    <App />
  </ContextProvider>
  // </React.StrictMode>,
)

App.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { useUserInfo } from './utils/commonContext'
import Form from './views/form/Form'

function App() {
  const userInfo = useUserInfo();
  console.log("useUserInfo:", userInfo);
  return (
    <>
        <h2>标题</h2>
        <p>name: {userInfo.name}</p>
        <p>age: {userInfo.age}</p>
        <p>intro: {userInfo.intro}</p>
        <p>gender: {userInfo.gender}</p>
        <Form />
    </>
  )
}

export default App

在线笔记项目

原型图

功能分析

引入字体库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
fortawesome

// 安装
	npm i @fontawesome/free-solid-svg-icons -S
	
	
// 引用
	import {FontAwesomeIcon} from '@fontawesome/react-fontawesome'
	import {faCoffee} from 'fontawesome/free-solid-svg-icons'
	
//使用

<FontAwesomeIcon icon={faCoffee}></FontAwesomeIcon>

内置类型检查

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
-propTypes
v15.5 以上 需要单独安装 prop-types 库

// 引入
import PropTypes from 'prop-types'

const FileSearch = ({title, onFileSearch}) => {
    const [inputActive, setInputActive] =  useState(false);
    const [value, setvalue] = useState('');

    return (
        <div className='file-search-box'>
            <div className='input-box'>
              <Input autoFocus onPressEnter={onFileSearch} />
            </div>
            <Button shape="circle" size="middle"} icon={<CloseOutlined} />
        </div>
    )
}
// 组件类型检查
FileSearch.propTypes = {
    title: PropTypes.string,
    onFileSearch: PropTypes.func.isRequired
}
// 组件默认值
FileSearch.defaultProps = {
    title: '我的云文档'
}

classnames

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 一个简单的JavaScript工具有条件地一起加入类名

npm install classnames

// react 中使用
var classNames = require('classnames');

class Button extends React.Component {
  
  render () {
    var btnClass = classNames({
      btn: true,
      'btn-pressed': this.state.isPressed,
      'btn-over': !this.state.isPressed && this.state.isHovered
    });
    return <button className={btnClass}>{this.props.label}</button>;
  }
}

引入WangEditor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// v5版本js动态设置初始化内容有点问题

需安装 @wangeditor/editor 和 @wangeditor/editor-for-react

// FileEditer.js
import React,{useState, useEffect} from 'react'
import './FileEditer.scss'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'

export default function FileEditer() {
    const [editor, setEditor] = useState(null) // 存储 editor 实例
    const defaultContent = [] // 编辑器默认内容，空内容
    
    const toolbarConfig = {} // 菜单栏配置
    
    // 编辑器配置
    const editorConfig = {
        placeholder: '请输入内容...',
        onCreated: (editor) => {
            // 编辑器创建之后，记录 editor 实例，重要 ！！！ （有了 editor 实例，就可以执行 editor API）
            setEditor(editor)
        },
        onChange: (editor) => {
            // editor 选区或者内容变化时，获取当前最新的的 content
            console.log('changed', editor.children)
        }
    }
    
    // 组件销毁时，及时销毁 editor 实例，重要！！！
    useEffect(() => {
        return () => {
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        }
    }, [editor])
    
    return (
        <div className='edit-wrap'>
            {/* 渲染 toolbar */}    
            <Toolbar
                editor={editor}
                defaultConfig={toolbarConfig}
                style={{ borderBottom: '1px solid #ccc',boxSize: 'border-box' }}
            />

            {/* 渲染 editor */}
            <Editor
                defaultConfig={editorConfig}
                defaultContent={defaultContent}
                style={{ height: 'calc(100% - 41px)' }}
            />
        </div>
    )
}

引入wangeditor v4版本

1
2
3
4
5
6
// Easy-mde 编辑器

// 安装
npm i wangeditor --save


State设计原则

1
2
3
4
1、最小化 State 原则
2、DRY - Dont Reapeat Yourself
3、有些数据可以根据已有 State 计算
4、使用多个 State 变量

App state 分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1、文件列表			
2、搜索后的文件列表
3、未保存的文件列表
4、已经打开的文件列表
5、当前被选中的文件

-所需数组
files: [{id: '1'},]
searchedFiles: [{id: '1'},..]
unsavedFiles:  [{id: '2'},...]
openedFiles:   [{id: '2'},...]
activeFile:    {id: '1',...}

-优化
  files: [{id: '1'},..]
  unsavedFileIDs: ['1','2']
  openedFileIDs: ['2']
  activeFileID: '1'

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。