react内容汇总

88 阅读2分钟

什么是React,有什么作用?

React是一个基于组件维度开发单页应用的前端库

React生命周期

参考juejin.cn/post/691411…

针对React hooks函数组件 的本质是函数,没有 state 的概念的,因此不存在生命周期一说,仅仅是一个 render 函数而已。 但是引入 Hooks 之后就变得不同了,它能让组件在不使用 class 的情况下拥有 state,所以就有了生命周期的概念,所谓的生命周期其实就是 useState、 useEffect() 和 useLayoutEffect() 。

React的state

setState 参考juejin.cn/post/684490… 注意:定时器中的setState会立刻更新页面

React怎么模拟的生命周期

useEffect(() => {}, [])数组中没有内容时什么时候执行? 当 useEffect 的第二个参数数组为空数组时,表示该 useEffect 只在组件挂载时执行一次,不会在组件更新时执行。这是因为空数组表示依赖项为空,即该 useEffect 不依赖于任何状态或属性的变化,因此只会在组件挂载时执行一次。

模拟哪些生命周期

  1. componentDidMount:在组件挂载后执行一次,可以用来进行一些初始化操作。使用空数组作为 useEffect 的第二个参数,可以模拟 componentDidMount 生命周期。
  2. componentDidUpdate:在组件更新后执行,可以用来响应状态或属性的变化。使用有依赖的数组作为 useEffect 的第二个参数,可以模拟 componentDidUpdate 生命周期。
  3. componentWillUnmount:在组件卸载前执行,可以用来进行一些清理操作。在 useEffect 中返回一个函数,可以模拟 componentWillUnmount 生命周期。
复制代码

useState 参考juejin.cn/editor/draf…

constructoruseState
getDerivedStateFromPropsuseState 里面 update 函数
shouldComponentUpdateuseMemo
componentDidMountuseEffect
componentDidUpdateuseEffect
componentWillUnmountuseEffect
getDerivedStateFromError

useState和setState的差异

参考:juejin.cn/post/695988…

React hooks 相关API

useState

juejin.cn/post/725031…

useEffect & useLayoutEffect

juejin.cn/post/725031…

useMemo & Memo

juejin.cn/post/725031…

useCallBack

juejin.cn/post/725030…

优化策略juejin.cn/post/684490…

useRef

juejin.cn/post/725031…

useforwardRef & useImperativeHandle

参考juejin.cn/post/707476…

React fiber

juejin.cn/post/725031…

React render 流程

juejin.cn/post/684490…

React diff算法

juejin.cn/post/684490…

react事件机制

juejin.cn/editor/draf… juejin.cn/post/695563…

自定义hook

juejin.cn/post/725031…

高阶组件

juejin.cn/post/725029…

react hooks的执行顺序

zh-hans.legacy.reactjs.org/docs/hooks-…

react-router

juejin.cn/post/688629…

juejin.cn/post/725031…

部分题目

juejin.cn/post/725030…