跳到主要内容

React 总结

React​

memo()​

memo() 用来提升组件性能，它将一个普通组件转为纯组件。参数如下：

  • 第一个参数为要转换的组件类；

  • 第二个参数为断言函数，判断是否重新渲染组件，参数为新旧 props 。

没有断言函数的时候，如果传入组件的属性不变（严格比较），则不会重新渲染组件。

memo() 是用来代替旧的 PureComponent 及 shouldComponentUpdate() 。

错误边界组件​

  • 使用静态的 getDerivedStateFromError() 处理错误；

  • 通过判断语句决定显示原页面还是错误页面。

React.lazy()​

传入一个函数，一般为用 import() 动态导入组件。生成的组件会保证在渲染时才会加载。

Suspense 组件​

该组件用来渲染一个等待消息。等待消息组件传给 Suspense 组件的 fallback 属性。

原页面应当抛出一个 Promise 表示进入加载环节，当 Promise 完成后才会显示原页面。

Hook​

钩子使用规则​

  • 钩子只在组件的作用域中运行；

  • 把功能分解到多个钩子中；

  • 钩子只应当在顶层代码中调用。

useState()​

const [state, setState] = useState(initialState);

初始值只会在初始渲染中起作用，如果该初始值需要通过复杂计算获得，可以传入一个函数（同样仅在初始渲染中调用）。

React 使用 Object.is() 来比较 state 。

setState 可以接受一个参数，即旧值。

useRef()​

直接在组件中指定 ref 属性，然后使用其 current 属性进行元素访问。

useContext()​

useContext() 用来获取自定义 Context 中 Provider 的 value 值：

const value = useContext(MyContext);

useEffect()​

useEffect() 相当于是在渲染之后调用的一个函数：

  • 第一个参数为副作用函数（可以返回一个清除函数）；

  • 第二个为可选的依赖数组（当数组元素状态变化才会调用副作用）。

和原始值不同，数组、对象等（尤指字面量）仅当为同一引用时才不会触发渲染。

useMemo() & useCallback()​

useMemo() 用于创建要缓存的值，避免重新渲染时的不必要重新计算。

第一个参数为用于计算值的回调，第二个为依赖数组（应当包含计算所需的变量）。

useCallback() 与前者类似，但是缓存对象为函数，避免副作用的不必要重复。

useLayoutEffect()​

  1. 渲染；

  2. 调用 useLayoutEffect() ；

  3. 浏览器绘制，把组件元素添加到 DOM 中；

  4. 调用 useEffect() 。

useLayoutEffect() 应当用于获取或者计算 UI、鼠标位置等信息。

useReducer()​

可以用 useReducer() 代替 useState() 。函数使用如下：

  • 第一个参数为更新状态的函数，参数为当前状态值和接收来的更新信息；

  • 第二个参数为状态初始值。

  • 返回一个状态值，和一个用来派发更新信息的函数。