import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); //count:声明的变量；setCount：改变count值的函数；0：count的初始值 return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
useState是react自带的一个hook函数，它的浸染就是用来声明状态变量。useState这个函数吸收的参数是我们的状态初始值（initial state），它返回了一个数组，这个数组的第[0]项是当前当前的状态值，第[1]项是可以改变状态值的要领函数。
所以我们做的工作其实就是，声明白一个状态变量count，把它的初始值设为0，同时提供了一个可以变动count的函数setCount。
当用户点击按钮时，我们挪用setCount函数，这个函数吸收的参数是修悔改的新状态值。接下来的工作就交给react了，react将会从头渲染我们的Example组件，
如果一个组件有多个状态值怎么办？
首先，useState是可以多次挪用的，所以我们完全可以这样写：
function ExampleWithManyStates() { const [age, setAge] = useState(42); const [fruit, setFruit] = useState('banana'); const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]); }
其次，useState吸收的初始值没有划定必然要是string/number/boolean这种简朴数据范例，它完全可以吸收工具可能数组作为参数。独一需要留意的点是，之前我们的this.setState做的是归并状态后返回一个新状态，而useState是直接替换老状态后返回新状态。
hook，一方面它是直接用在function傍边，而不是class；另一方面每一个hook都是彼此独立的，差异组件挪用同一个hook也能担保各自状态的独立性。
react是怎么担保多个useState的彼此独立的？
谜底是，react是按照useState呈现的顺序来定的。我们详细来看一下
//第一次渲染 useState(42); //将age初始化为42 useState('banana'); //将fruit初始化为banana useState([{ text: 'Learn Hooks' }]); //... //第二次渲染 useState(42); //读取状态变量age的值（这时候传的参数42直接被忽略） useState('banana'); //读取状态变量fruit的值（这时候传的参数banana直接被忽略） useState([{ text: 'Learn Hooks' }]); //...
react划定我们必需把hooks写在函数的最外层，不能写在ifelse等条件语句傍边，来确保hooks的执行顺序一致。
Effect Hooks
案例：
import { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // 雷同于componentDidMount 和 componentDidUpdate: useEffect(() => { // 更新文档的标题 document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
如果不消hooks,我们会怎么写?
class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } componentDidMount() { document.title = `You clicked ${this.state.count} times`; } componentDidUpdate() { document.title = `You clicked ${this.state.count} times`; } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); } }
我们写的有状态组件，凡是会发生许多的副浸染（side effect），好比提倡ajax请求获取数据，添加一些监听的注册和打消注册，手动修改dom等等。我们之前都把这些副浸染的函数写在生命周期函数钩子里，好比componentDidMount，componentDidUpdate和componentWillUnmount。而此刻的useEffect就相当与这些声明周期函数钩子的荟萃体。它以一抵三。
useEffect怎么解绑一些副浸染?
传给useEffect的副浸染函数返回一个新的函数即可。这个新的函数将会在组件下一次从头渲染之后执行。
import { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); function handleStatusChange(status) { setIsOnline(status.isOnline); } useEffect(() => { ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); // 必然留意下这个顺序：汇报react在下次从头渲染组件之后，同时是下次挪用ChatAPI.subscribeToFriendStatus之前执行cleanup return function cleanup() { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; }); if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' : 'Offline'; }
怎么跳过一些不须要的副浸染函数?