React Hooks新特性学习随笔

React Hooks 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

前言

本篇主要以讲几个常用的api为主。

1.useState

这个例子用来显示一个计数器。当你点击按钮，计数器的值就会增加，现在我们的写法如下，

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

这是我们所熟悉的写法，替换成useState后

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

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

• 1.首先通过在函数组件里调用useState()来给组件添加一些内部 state,（React 会在重复渲染时保留这个 state）。
• 2.useState()可以传入一个参数，传入的参数就是初始的state，在上面例子当中，0就是初始值。【这个初始 state 参数只有在第一次渲染的会被用到。】
• 3.useState() 会返回一对值：当前状态和一个让你更新它的函数（你可以在事件处理函数中或其他一些地方调用这个函数，它类似 class 组件的 this.setState，但是它不会把新的 state 和旧的 state 进行合并。）
• 4.可以通过useState声明多个state变量，如下

function ExampleWithManyStates() {
  // 声明多个 state 变量！
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

2.useEffect

useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。

依然是先上例子

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

import React, { useState, useEffect } from 'react';

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

  // 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    document.title = `You clicked ${this.state.count} times`;
  });

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

• 1.默认情况下，React 会在每次渲染后调用副作用函数 —— 包括第一次渲染的时候。

• 2.副作用函数还可以通过返回一个函数来指定如何“清除”副作用。它的执行顺序是，每次页面更新前，先执行return的函数，然后在执行useEffect里面的内容。

import React, { useState, useEffect } from 'react';

function Example() {

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

  useEffect(() => {
    console.log(`You clicked ${count} times`);
    return () => {
        console.log('每次页面更新前，我会先被执行');
    }
  });

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

• 3.跟 useState 一样，你可以在组件中多次使用 useEffect，因此通过使用 Hook，你可以把组件内相关的副作用组织在一起（例如创建订阅及取消订阅），而不要把它们拆分到不同的生命周期函数里。
• 4.useEffect还可以传入第二个参数，指定当某个值发生变化的时候，才触发副作用.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

• 5.如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。

3.useReducer

useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。（如果你熟悉 Redux 的话，就已经知道它如何工作了。）

// reducer.js
export const initialState = {count: 0};

export default (state, action)  => {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

// Counter.js
import React, { useReducer } from 'react';
import reducer, { initalState } from './reducer.js';

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </div>
  );
}

4.useContext

接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。

具体使用查看这篇文章。