react hooks入门详细教程

State Hooks

案例:

1234567891011121314import { 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是可以多次调用的,所以我们完全可以这样写:

12345function 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出现的顺序来定的。我们具体来看一下

123456789//第一次渲染useState(42); //将age初始化为42useState('banana'); //将fruit初始化为bananauseState([{ text: 'Learn Hooks' }]); //... //第二次渲染useState(42); //读取状态变量age的值(这时候传的参数42直接被忽略)useState('banana'); //读取状态变量fruit的值(这时候传的参数banana直接被忽略)useState([{ text: 'Learn Hooks' }]); //...

react规定我们必须把hooks写在函数的最外层,不能写在ifelse等条件语句当中,来确保hooks的执行顺序一致。

Effect Hooks

案例:

1234567891011121314151617181920import { 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,我们会怎么写?

123456789101112131415161718192021222324252627class 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的副作用函数返回一个新的函数即可。这个新的函数将会在组件下一次重新渲染之后执行。

12345678910111213141516171819202122import { 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之前执行cleanupreturn function cleanup() {ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);};}); if (isOnline === null) {return 'Loading...';}return isOnline ? 'Online' : 'Offline';}

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

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

123useEffect(() => {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是否在线。

123456789101112131415161718import { 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组件就可以简写为:

12345678function FriendStatus(props) {const isOnline = useFriendStatus(props.friend.id); if (isOnline === null) {return 'Loading...';}return isOnline ? 'Online' : 'Offline';}

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

123456789function 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)从对应的框架引入。

12import { usePageScroll, useReachBottom } from '@tarojs/taro' // Taro 专有 Hooksimport { useState, useEffect } from 'react' // 框架 Hooks (基础 Hooks)

到此这篇关于react hooks入门详细教程的文章就介绍到这了,更多相关react hooks入门内容请搜索kinponet以前的文章或继续浏览下面的相关文章希望大家以后多多支持kinponet!

原创文章,作者:Zhu, Yuanyuan,如若转载,请注明出处:https://www.yidc.net/archives/15823