react视频笔记

最新推荐文章于 2024-07-15 14:32:39 发布

倔强的ez

最新推荐文章于 2024-07-15 14:32:39 发布

阅读量61

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/weixin_40657053/article/details/115460826

版权

react 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇React笔记详细探讨了React的基础，包括组件（Class与Function组件）、Hook（useState和useEffect）的使用，以及生命周期方法的解析。特别强调了setState的异步性和生命周期方法的变化，如在17版后部分生命周期方法的废除及其原因。

摘要由CSDN通过智能技术生成

react笔记

回顾基础:
react 组件 ,class组件 function 组件，接受任意入参props,返回用于描述展示内容的react元素。
class组件
继承于component.
hook
useState 获取状态
const {date,setData} = useState(new Date());
useEffect 可以看成是 componentDidMount，componentDidUpdate 和 componentWillUnmount三者的结合体。
useEffect(()=>{

},[]) 第二个参数不依赖于任何一个state或者是prop，不用重复执行。

正确使用setState.

state更新可能是异步的，也可能是同步的。
setState在合成事件中是异步的，这里说的异步是批量更新。最后一起更新上去。
在生命周期中也是异步的。
setState在setTimeout和原生事件中是同步的。
state更新可能会被合并，因为是批量更新。
setState((state)=>{
return {counter:state.counter + v}
})
setState传入函数能转变为链式调用。

生命周期

生命周期包括
初始化Init 挂载更新销毁
shouldWillMount render shouldDidMount

state改变之后执行shouldComponentUpdate ->重新挂载
prop改变之后执行receiveProps，再通过改变之后执行shouldUpdateComponent -> willUpdate -> render ->didUpdate

17之后componentWillMount componentWillUnMount。
willReceiveProps 初次渲染的时候不会执行，只有在已挂载的组件接收新的props的时候，才会执行。

componentWillMount
componentWillReceiveProps
componentWillUpdate

17出现

getDerivedStateFromProps 更新state 返回新的state
getSnapshotBeforeUpdate

为什么要废除?

因为componentWillMount 很多人会把ajax异步加载放在这里执行。为了解决没有数据短暂白屏的问题。
实际上放在ComponentDidMount也一样。 react是在 componentDidMount之后才开始渲染。同时，服务器端渲染有时候不会执行componentWillMount.