前言

前段时间已经比较完整的借助 “尚硅谷” 的免费 React 教学视频，完整的学习了一次 React 技术栈的相关内容，下面是我自己重自己重温一下整个 React 学习中的一些知识点。

JSX 语法

JSX 语法是整个 React 的基础内容，学 React 一开始就得学习 JSX，JSX 是最基础的东西，但是其实内容也不多。

1. JSX 就是在 JS 的基础上增加了对 HTML 标签语法的支持
2. JSX 是用于生成虚拟 DOM 的，JSX 生成虚拟 DOM 需要 Babel 和 React 渲染函数的支持

组件

1. 组件是一个 React 用于构建页面的基础单位，其中包含 JS/CSS/HTML 内容
2. 组件名称必须是大写字母开头
3. 有函数组件和类组件，类组件具备完备的 React 业务功能，函数组件本身不能有状态和生命周期函数（有 props），但后面我们会说到 Hooks，可以扩展函数组件的功能，使得函数组件开发模式也可以成功 React 开发的核心模式（其实目前已经成为主流了）

类组件的状态

1. 设置 this.state 可以生成组件的状态
2. 组件可以从父组件中接受参数 this.props
3. 直接修改 state 页面并不会更新页面，可通过 this.setState 函数修改组件并更新页面

类组件生命周期函数

0. constructor
1. componentWillMount
2. componentDidMount
3. componentWillReceiveProps
4. shouldComponentUpdate
5. componentWillUpdate
6. render
7. componentDidUpdate
8. componentWillUnmount

React 16.3 新增的 2 个生命周期函数

1. static getDerivedStateFromProps
2. getSnapshotBeforeUpdate

错误错误钩子函数

1. static getDerivedStateFromError
2. componentDidCatch

ref 的使用

1. 用字符串设置 ref <input ref="input"/>, this.refs.input，不推荐再使用
2. 回调函数 ref, 要注意，每次 render 函数执行时，回调函数都会被执行以获取最新 ref 引用，例：

   class RefSample extends React.Component {
       getInput = (refInstance) => {
           console.log(refInstance)
       }
   
       render() {
           <input ref={ getInput }/>
       }
   }
   

3. 用 input = React.createRef 生成 ref 容器后绑定 ref <input ref={input}/>

受控组件

受控组件就是绑定的 Form 表单元素自动设置和获取值的组件

forceUpdate 函数

forceUpdate 用于在需要强制刷新组件时使用

DOM 的 diff 算法

1. 节点的数组渲染一定要设置 key 值
2. DOM 的更新是通过 key 值来确定 VNode 有没有变化，需不需要更新

react 路由

1. React 路由 npm 插件 react-router-dom
2. 配置路由
3. 路由传参

redux 的使用相关

1. redux 有 store/action/reducer/actionCreator 等概念，还有异步 action 的使用
2. react-redux 的使用
3. react-redux 的 Provider 组件
4. react-redux 的容器组件与 UI 组件的嵌套和传参方式，connect 函数，mapStateToProps, mapDispatchToProps

LazyLoad 懒加载

略

React Hooks

Hooks 是在 React 16.8 加入的新特性，他是的 React 的函数组件也可以使用状态/生命周期等功能，类组件因为繁琐的使用方式，慢慢被遗弃

1. useState
2. useEffect 注意它的第二个参数
3. useRef

其他知识点

1. Fragment 组件和空标签 <></> 的使用
2. PureCompnent 组件
3. React.createContext 方法的使用（功能类似于 Provider）
4. ErrorBoundary 相关功能和与之相对的两个钩子函数

总结

React 的知识点还是比较多的，目前没有实践项目，接下来打算写一个实践项目，可以使得自己有更好的理解，知识点也会记得更牢固。