React Hooks新特性学习随笔

时间：2021-06-28 16:04:20

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 决定。

具体使用查看这篇文章。

相关文章