当前位置 博文首页 > 文章内容

    react hooks入门详细教程

    作者:21344 栏目:未分类 时间:2021-04-06 14:43:59

    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)