react之Hook笔记

Hook

react

发布日期: 2021-03-02

更新日期: 2021-03-02

文章字数: 2.4k

阅读时长: 10 分

阅读次数:

1.组件类的缺点

Redux 的作者 Dan Abramov 总结了组件类的几个缺点。

大型组件很难拆分和重构，也很难测试。
业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑。
组件类引入了复杂的编程模式，比如 render props 和高阶组件。

下面我们编写点击按钮后实现按钮文字替换的效果例子


import React, { Component } from "react";

export default class Button extends Component {
  constructor() {
    super();
    this.state = { buttonText: "Click me, please" };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(() => {
      return { buttonText: "Thanks, been clicked!" };
    });
  }
  render() {
    const { buttonText } = this.state;
    return <button onClick={this.handleClick}>{buttonText}</button>;
  }
}

可以看到，它的代码已经很”重”了。真实的 React App 由多个类按照层级，一层层构成，复杂度成倍增长。再加入 Redux，就变得更复杂。

2.什么是纯函数组件

纯函数组件：它不能包含状态和不支持生命周期方法

实例

function PureFunction(props) {
  return <h1>Hello, {props.name}</h1>;
}

这个函数只做一件事，就是根据输入的参数，返回组件的 HTML 代码。这种只进行单纯的数据计算（换算）的函数，在函数式编程里面称为 “纯函数”

3.什么是函数副效应？

看到这里，你可能会产生一个疑问：如果纯函数只能进行数据计算，那些不涉及计算的操作（比如生成日志、储存数据、改变应用状态等等）应该写在哪里呢？

函数式编程将那些跟数据计算无关的操作，都称为 “副效应” （side effect）。如果函数内部直接包含产生副效应的操作，就不再是纯函数了，我们称之为不纯的函数。

4.hook

概念：Hook 这个单词的意思是”钩子”。React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码”钩”进来。 React Hooks 就是那些钩子。所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用use前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 usexxx。

设计目的：React Hooks 的设计目的，就是加强版函数组件，完全不使用”类”，就能写出一个全功能的组件。

简单的理解就是：hook就是让你的函数组件产生副效应，使你的函数组件也能更改运用状态,输出日志

下面介绍 React 默认提供的四个最常用的钩子。

useState()

useContext()

useReducer()

useEffect()

4.(1):useState()：状态钩子

useState()用于函数组件引入状态，纯函数不能有状态，所以把状态放在钩子里面。

现在我们把之前那个点击按钮，会导致按钮的文字改变的例子用Hook来写

import React, { useState } from "react";

export default function  Button()  {
  const  [buttonText, setButtonText] =  useState("Click me,   please");

  function handleClick()  {
    return setButtonText("Thanks, been clicked!");
  }

  return  <button  onClick={handleClick}>{buttonText}</button>;
}

上面代码中，Button 组件是一个函数，内部使用useState()钩子引入状态。

useState()这个函数接受状态的初始值，作为参数，上例的初始值为按钮的文字。该函数返回一个数组，数组的第一个成员是一个变量（上例是buttonText），指向状态的当前值。第二个成员是一个函数，用来更新状态，约定是set前缀加上状态的变量名（上例是setButtonText）。

总结：useState 会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。它类似 class 组件的 this.setState，但是它不会把新的 state 和旧的 state 进行合并。

4.(2):useContext()：共享状态钩子

如果需要在组件之间共享状态，可以使用useContext()。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HOOK</title>
</head>

<body>
  <!-- 准备好一个“容器” -->
  <div id="test"></div>

  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">
    const AppContext = React.createContext({});
    const N = () => {
      const { describe } = React.useContext(AppContext);
      return (
        <div>
          <h2>{describe}</h2>
        </div>
      );
    };
    const D = () => {
      const { describe } = React.useContext(AppContext);
      return (
        <div>
          <h2>{describe}</h2>
        </div>
      );
    };
    function C() {
      return (
        {/*AppContext.Provider提供了一个 Context 对象，这个对象可以被子组件共享。*/}
        <AppContext.Provider
          value={{
            describe: '我是hookc常见钩子useContext()，是一个用于共享状态钩子',
          }}
        >
          <N />
          <D />
        </AppContext.Provider>
      );
    }
    ReactDOM.render(<C />, document.getElementById('test'));
  </script>
</body>

</html>

4.(3):useReducer()：action 钩子

React 本身不提供状态管理功能，通常需要使用外部库。这方面最常用的库是 Redux。

Redux 的核心概念是，组件发出 action 与状态管理器通信。状态管理器收到 action(动作) 以后，使用 Reducer 函数算出新的状态，Reducer 函数的形式是(state, action) => newState。

useReducers()钩子用来引入 Reducer 功能。

const [state, dispatch] = useReducer(reducer, initialState);

上面是useReducer()的基本用法，它接受 Reducer 函数和状态的初始值作为参数，返回一个数组。数组的第一个成员是状态的当前值，第二个成员是发送 action 的dispatch函数。

下面是一个计数器的例子。用于计算状态的 Reducer 函数如下。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HOOK</title>
  </head>

  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      const myReducer = (state, action) => {
        switch (action.type) {
          case 'countUp':
            return {
              ...state,
              count: state.count + 1,
            };
          default:
            return state;
        }
      };
      function App() {
        const [state, dispatch] = React.useReducer(myReducer, { count: 0 }); //第一个参数为 Reducer 函数,第二个是状态的初始值
        return (
          <div>
            <button onClick={() => dispatch({ type: 'countUp' })}>+1</button>
            <p>Count: {state.count}</p>
          </div>
        );
      }

      ReactDOM.render(<App />, document.getElementById('test'));
    </script>
  </body>
</html>

由于 Hooks 可以提供共享状态和 Reducer 函数，所以它在这些方面可以取代 Redux。但是，它没法提供中间件（middleware）和时间旅行（time travel），如果你需要这两个功能，还是要用 Redux。

4.(4):useEffect():副作用钩子

useEffect()用来引入具有副作用的操作，这个副作用钩子跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。，最常见的就是向服务器请求数据。

useEffect()的用法如下。

useEffect(()  =>  {
  // Async Action
}, [dependencies])

上面用法中，useEffect()接受两个参数。第一个参数是一个函数，异步操作的代码放在里面。第二个参数是一个数组，用于给出 Effect 的依赖项，只要这个数组发生变化，useEffect()就会执行。第二个参数可以省略，这时每次组件渲染时，就会执行useEffect()。

下面看一个例子。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HOOK</title>
  </head>

  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      function Button() {
        const [count, setCount] = React.useState(0);

        React.useEffect(() => {
          document.title = `You clicked ${count} times`;
        });
        return (
          <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>
          </div>
        );
      }

      ReactDOM.render(<Button />, document.getElementById('test'));
    </script>
  </body>
</html>

上面代码中，每当点击按钮是，You clicked ${count} times中的count都会发生变化，useEffect()就会执行。组件第一次渲染时，useEffect()也会执行。

创建自己的 Hooks

上例的 Hooks 代码还可以封装起来，变成一个自定义的 Hook，便于共享。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HOOK</title>
</head>

<body>
  <!-- 准备好一个“容器” -->
  <div id="test"></div>

  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    const usePerson = (personId) => { //usePerson()就是一个自定义的 Hook。
      const [loading, setLoading] = React.useState(true);
      const [person, setPerson] = React.useState({});
      React.useEffect(() => {
        setLoading(true);
        fetch(`https://swapi.co/api/people/${personId}/`)
          .then(response => response.json())
          .then(data => {
            setPerson(data);
            setLoading(false);
          });
      }, [personId]);
      return [loading, person];
    };

    const Person = ({ personId }) => {
      const [loading, person] = usePerson(personId);

      if (loading === true) {
        return <p>Loading ...</p>;
      }

      return (
        <div>
          <p>You're viewing: {person.name}</p>
          <p>Height: {person.height}</p>
          <p>Mass: {person.mass}</p>
        </div>
      );
    };

    ReactDOM.render(<Person />, document.getElementById('test'));
  </script>
</body>

</html>