}
render () {
return (
You clicked {this.state.count} times
<button onClick={() => this.setState({count: this.state.count + 1)}}>Click me
)
}
}
需求很简单,设定初始值为0,当点击按钮时,count
加 1。
当使用 useState Hook 实现上述需求时:
import React, { useState } from ‘react’;
function Example() {
const [count, setCount] = useState(0);
return (
You clicked {count} times
<button onClick={() => setCount(count + 1)}>
Click me
);
}
其中 useState Hook
做了哪些事情呢?
1.在调用 useState 方法时,定义了一个state变量count,它与类组件中的this.state功能完全相同。对于普通变量,在函数退出后即消失,而state中的变量会被 React 保留。2.useState 方法只接收一个参数,那就是初始值。useState 方法一次只定义一个变量,如果想在state中存储两个变量,只需要调用两次 useState() 即可。3.useState 的返回值是一个由 当前state
以及 更新state的函数
组成的数组。这也是采用 数组解构 方式来获取的原因。
在使用 Hooks 实现的示例中,会发现 useState 让代码更加简洁了:
•获取state:类组件中使用 this.state.count
,而使用了 useSatet Hook 的函数组件中直接使用 count
即可。•更新state:类组件中使用 this.setState()
更新,函数组件中使用 setCount()
即可。
这里抛出几个疑问,在讲解原理的地方会进行详细解释:
•React 是如何记住 useState 上次值的?。•React 是如何知道 useState 对应的是哪一个组件?。•如果一个组件内有多个 useState,那重新渲染时 useState 的取值顺序又是怎么确定的?。
useEffect Hook
在讲 useEffect
之前,先讲一下 React 的副作用。
在 React 中,数据获取、订阅或者手动修改DOM等操作,均被称为 ‘副作用’,或者 ‘作用’ 。
而 useEffect 就是一个 Effect Hook ,为函数组件添加操作副作用的能力,可以把它看作是类组件中的componentDidMount
、componentDidUpdate
、componentWillUnmount
三个周期函数的组合。
下面是一个关于订阅的例子:
import React from ‘react’;
class Example extends React.Component {
constructor (props) {
super(props)
this.state = {
isOnline: null
}
}
componentDidMount() {
ChatAPI.subscribeToFriendStatus(
this.