React学习知识点之组件

这是我参与8月更文挑战的第16天，活动详情查看：8月更文挑战。

组件

是否受控

• 非受控组件

  表单数据交由DOM节点管理，特点是表单数据在需要时要进行获取，不能实时获取，代码实现比较简单

• 受控组件

  表单数据交由state对象管理，特点是可以实时得到表单时数据，代码相对复杂

React Hook

路由Hooks react-router-dom

• useHistory

• useLocation

• useRouteMatch

• useParams

钩子函数

useState

• 通过闭包实现保存数据（一般函数执行完成后变量就会被释放掉）

• 状态每次更新时DOM都会重新渲染

useEffect

• 替换componentDidmount、componentDidUpdate、componentWillUnmount生命周期

• useEffect(()=>{}) 等于 componentDidmount、componentDidUpdate。会在组件挂载结束后执行、会在组件更新完成后执行

• useEffect(()=>{},[]) 等于 componentDidmount

• useEffect(()=>()=>{}) 等于 componentWillUnmount。会在组件卸载前执行

• 只有指定数据发生变化后才会触发Effect：useEffect(()=>{console.log(count)},[count])

• useEffect中的参数函数不能是异步函数，因为useEffect函数要返回清理资源的函数，如果是异步函数就变成了返回Promise，可以在内部使用自执行函数

标记: useEffect(()=>{ (async ()=>{ await axios.get() } )() })

useMemo

会缓存计算结果，如果检测值没有发生变化，即使组件重新渲染，也不会重新计算，计算行为可以有助于避免在每个渲染上执行昂贵的计算

主要用于性能优化，如果本组件中的数据没有发生变化，则阻止组件更新，类似于类组件中的PureComponent和shouldComponentUpdate

useCallback

主要用于性能优化，缓存函数，使组件重新渲染时得到相同的函数实例

useRef

• 用来获取DOM元素对象

• 用来保存数据，当组件重新渲染后数据不会丢失

自定义Hook

• 可以实现组件与组件之间的逻辑共享

• 是一个函数，以use开头

• 是逻辑与内置Hook的组合

生命周期

挂载阶段

• constructor（）

• static getDerivedStateFromProps（）

• render（）

• componentDidMount（）

更新阶段

• static getDerivedStateFromProps（）

• shouldComponentUpdate（）

• render（）

• getSnapshotBeforeUpdate（）：在最近一次渲染输出之前调用，使组件能在发生更改之前从DOM中捕获一些信息，如：滚动位置，此声生命周期的任何返回值将作为参数传递给componentDidUpdate（）

• componentDidUpdate（）

卸载阶段

• componentWillUnmount（）