关于react hooks

Posted 2021-03-15 bbcfive

一、react的组件

react的核心是组件，react有两种组件类：有状态组件（class）和无状态组件（function）。

有状态组件（class）常常使代码变的冗余而复杂，例如下面一个简单的button组件：

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

可以看出代码已经很重了。

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

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

因此，组件的最佳实现方式应该是函数，而不是类。

二、react hooks——加强版函数组件

Hook 这个单词的意思是"钩子"。

React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。

所有的钩子默认使用use前缀命名。

比如以下几个常见的钩子：

• useState()
• useContext()
• useReducer()
• useEffect()
• useCallback

三、状态钩子useState()

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

经过状态钩子改造后的button代码：

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

再看一个例子，钩前组件代码（有状态）：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

加钩子后的代码（无状态）：

import { useState } from ‘react‘;

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

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

四、共享状态钩子useContext()

现在有两个组件 Navbar 和 Messages，我们希望它们之间共享状态。

<div className="App">
  <Navbar/>
  <Messages/>
</div>

第一步就是使用 React Context API，在组件外部建立一个 Context。并封装它：

const AppContext = React.createContext({});
<AppContext.Provider value={{
  username: ‘superawesome‘
}}>
  <div className="App">
    <Navbar/>
    <Messages/>
  </div>
</AppContext.Provider>

上面代码中，AppContext.Provider提供了一个 Context 对象，这个对象可以被子组件共享。

Navbar 组件的代码如下：

const Navbar = () => {
  const { username } = useContext(AppContext);
  return (
    <div className="navbar">
      <p>AwesomeSite</p>
      <p>{username}</p>
    </div>
  );
}

还有许多hooks的示例用法可以参考官网。根据已有的hooks，还可以组合封装，创建出新的hooks来使用。

 

参考文献：

1.React Hooks 入门教程

2.React Hooks