react hooks入门详细教程_React

State Hooks

案例：

				?

									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';

									}

怎么跳过一些不必要的副作用函数?

按照上一节的思路，每次重新渲染都要执行一遍这些副作用函数，显然是不经济的。怎么跳过一些不必要的计算呢？我们只需要给useEffect传第二个参数即可。用第二个参数来告诉react只有当这个参数的值发生改变时，才执行我们传的副作用函数（第一个参数）。

				?

									useEffect(() => {

									 document.title = `You clicked ${count} times`;

									}, [count]); // 只有当count的值发生变化时，才会重新执行`document.title`这一句

当我们第二个参数传一个空数组[]时，其实就相当于只在首次渲染的时候执行。也就是componentDidMount加componentWillUnmount的模式。不过这种用法可能带来bug，少用。

还有哪些自带的Effect Hooks?

useContext
useReducer
useCallback
useMemo
useRef
useImperativeMethods
useMutationEffect
useLayoutEffect

怎么写自定义的Effect Hooks?

为什么要自己去写一个Effect Hooks? 这样我们才能把可以复用的逻辑抽离出来，变成一个个可以随意插拔的“插销”，哪个组件要用来，我就插进哪个组件里

比如我们可以把上面写的FriendStatus组件中判断朋友是否在线的功能抽出来，新建一个useFriendStatus的hook专门用来判断某个id是否在线。

				?

									import { useState, useEffect } from 'react';

									function useFriendStatus(friendID) {

									 const [isOnline, setIsOnline] = useState(null);

									 function handleStatusChange(status) {

									  setIsOnline(status.isOnline);

									 }

									 useEffect(() => {

									  ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);

									  return () => {

									   ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);

									  };

									 });

									 return isOnline;

									}

这时候FriendStatus组件就可以简写为：

				?

									function FriendStatus(props) {

									 const isOnline = useFriendStatus(props.friend.id);

									 if (isOnline === null) {

									  return 'Loading...';

									 }

									 return isOnline ? 'Online' : 'Offline';

									}

假如这个时候我们又有一个朋友列表也需要显示是否在线的信息：

				?

									function FriendListItem(props) {

									 const isOnline = useFriendStatus(props.friend.id);

									 return (

									  <li style={{ color: isOnline ? 'green' : 'black' }}>

									   {props.friend.name}

									  </li>

									 );

									}

这样就实现了组件复用。

taro hooks

在 Taro 中使用 Hooks API 很简单，Taro 的专有 Hooks（例如 usePageScroll, useReachBottom）从 @tarojs/taro 中引入，框架自己的 Hooks （例如 useEffect, useState）从对应的框架引入。

				?

									import { usePageScroll, useReachBottom } from '@tarojs/taro' // Taro 专有 Hooks

									import { useState, useEffect } from 'react' // 框架 Hooks （基础 Hooks）