让每一名学员高薪就业
返回列表 发新帖

React新特性一览

[复制链接]

114

主题

268

帖子

2522

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2522

版主

发表于 2019-7-31 17:23:06  | 显示全部楼层 | 阅读模式
生命周期
1. componentWillMount和componentWillReceiveProps替换为static getDerivedStateFromProps。getDerivedStateFromProps 会在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state,如果返回 null 则不更新任何内容
2. 新增错误处理生命周期 static getDerivedStateFromError和componentDidCatch
getDerivedStateFromError生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数,并返回一个值以更新 state,getDerivedStateFromError() 会在渲染阶段调用,因此不允许出现副作用。 如遇此类情况,请改用 componentDidCatch()。


HOOK
hook特性可以它让你在不编写 class 的情况下使用 state 以及其他的 React 特性。它是一个特殊的函数

1. hook之useState

通常情况下无状态组件是没有办法使用组件状态的,那么现在通过useState即可实现在无状态组件中使用组件状态(在这里无状态组件叫做函数组件好一点)。

在上面的例子中`const [count, setCount] = useState(0);`

我们调用useState函数的时候,定义了一个变量叫做count(名字随意),它的初始值就是在setCount中传入的参数而setCount(名字随意)就是一个改变count的函数,这类似于状态组件当中在state中定义count,而setCount的作用类似于调用this.setState()来改变count。   这里需要注意的是调用useState的时候需要成对的获取一个变量和一个可以修改变量的函数(在这里即是count和setCount)

2. hook之useEffect

该hook可以使你在无状态组件(也叫函数组件)中执行副作用(例如请求数据或者清除定时器等)操作,我们可以把该hook看做是componentDidMount/componentDidUpdate/componentWillUnmount三个生命周期函数的组合,即在该三个生命周期函数任意一个触发的时候,useEffect也会被触发


在上面的例子中,当组件挂载完成后即useEffect会被触发,当我们调用setCount函数修改count的值之后useEffect会被触发,当组件卸载时也会触发useEffect

在这里我们可以把常见的副作用分为两类:需要清除的(例如定时器、事件***等)和不需要清除的(例如ajax请求等),这里我们主要讲一下需要清除的副作用怎么来操作:很简单,你只需要让useEffect函数返回一个函数即可,那么该函数就会在组件卸载的时候执行,你只需要在该函数里面执行清除操作(例如clearInterval(timer))就Ok了

3. hook规则:

只在对顶层使用hook,不要在循环,条件或者嵌套函数中调用hook,遵循这条规则可以确保hook在每次渲染中都按照同样的顺序被调用,这可以是React在多次的useState和useEffect调用之间保持hook状态的正确。


回复

使用道具 举报

0

主题

4

帖子

10

积分

菜鸟

Rank: 1

积分
10
发表于 2019-7-31 17:30:00  | 显示全部楼层
后悔当初我没有培训
回复 支持 反对

使用道具 举报

0

主题

3

帖子

22

积分

菜鸟

Rank: 1

积分
22
发表于 2019-7-31 17:30:05  | 显示全部楼层
翻了几百页源码社区贴,经常看到你  
回复 支持 反对

使用道具 举报

0

主题

5

帖子

7

积分

菜鸟

Rank: 1

积分
7
发表于 2019-7-31 17:30:11  | 显示全部楼层
楼主是老师么
回复 支持 反对

使用道具 举报

0

主题

4

帖子

6

积分

菜鸟

Rank: 1

积分
6
发表于 2019-7-31 17:30:15  | 显示全部楼层
先回复一个再慢慢看
回复 支持 反对

使用道具 举报

0

主题

5

帖子

7

积分

菜鸟

Rank: 1

积分
7
发表于 2019-7-31 17:30:35  | 显示全部楼层
谢谢您的分享!
回复 支持 反对

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   Python培训  |   大数据培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表