什么是React,有什么作用?
React是一个基于组件维度开发单页应用的前端库
React生命周期
针对React hooks函数组件 的本质是函数,没有 state 的概念的,因此不存在生命周期一说,仅仅是一个 render 函数而已。 但是引入 Hooks 之后就变得不同了,它能让组件在不使用 class 的情况下拥有 state,所以就有了生命周期的概念,所谓的生命周期其实就是
useState、useEffect()和useLayoutEffect()。
React的state
setState 参考juejin.cn/post/684490… 注意:定时器中的setState会立刻更新页面
React怎么模拟的生命周期
useEffect(() => {}, [])数组中没有内容时什么时候执行? 当
useEffect的第二个参数数组为空数组时,表示该useEffect只在组件挂载时执行一次,不会在组件更新时执行。这是因为空数组表示依赖项为空,即该useEffect不依赖于任何状态或属性的变化,因此只会在组件挂载时执行一次。
模拟哪些生命周期
componentDidMount:在组件挂载后执行一次,可以用来进行一些初始化操作。使用空数组作为useEffect的第二个参数,可以模拟componentDidMount生命周期。componentDidUpdate:在组件更新后执行,可以用来响应状态或属性的变化。使用有依赖的数组作为useEffect的第二个参数,可以模拟componentDidUpdate生命周期。componentWillUnmount:在组件卸载前执行,可以用来进行一些清理操作。在useEffect中返回一个函数,可以模拟componentWillUnmount生命周期。
复制代码
useState 参考juejin.cn/editor/draf…
| 旧 | 新 |
|---|---|
| constructor | useState |
| getDerivedStateFromProps | useState 里面 update 函数 |
| shouldComponentUpdate | useMemo |
| componentDidMount | useEffect |
| componentDidUpdate | useEffect |
| componentWillUnmount | useEffect |
| getDerivedStateFromError | 无 |