Hook是React 16.8 的新增特性。

在hook出现之前，使用react有一些痛点，简单整理如下几点：

由于业务变动，函数组件必须不得不改为类组件

组件逻辑复杂时难以开发和维护

一个逻辑难以跨组件使

目的：加强函数组件，完全不使用"类"，就能写出一个全功能的组件。

使用限制：

1、只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。

2、只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中。）

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

export default class Counter extends PureComponent {

  render () {

    const count = 1;

    return (

      <h1>来{count}碗大碗宽面</h1>

    );

  }

}

import React from 'react';

export default function Counter() {

    const count = 1;

    return (

        <h1>来{count}碗大碗宽面</h1>

    );

}

这种写法有重大限制，必须是纯函数，不能包含状态，也不支持生命周期方法，因此无法取代类

Hook

useState

useEffect

useCallback

useContext

useReducer

useMemo

useRef

useImperativeHandle

useLayoutEffect

useDebugValue

ueState

1、返回一对值（当前值和一个让你更新它的函数）

2、通过在函数组件里来调用它给组件添加一些内部state，react会在重新渲染时保留这个state

类组件

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

import { Button } from 'antd-mobile';

export default class Counter extends PureComponent {

  constructor(props) {

    super(props);

    this.state = { count: 1 };

  }

  render () {

    const { count } = this.state;

    return (

      <div>

        <h1>来{count}碗大碗宽面</h1>

        <Button onClick={() => this.setState({ count: count + 1 })}>加一碗</Button>

      </div>

    );

  }

}

函数组件

import React, { useState } from 'react';

import { Button } from 'antd-mobile';

export default function Counter() {

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

  return (

    <div>

      <h1>来{count}碗大碗宽面</h1>

      <Button onClick={() => setCount(count + 1)}>加一碗</Button>

    </div>

  );

}

状态：既放在state中的变量，比如上面例子中的count

更改状态的函数：类似class组件中的this.setState，上面例子的setCount，通过setCount(count+1)重新赋值更改状态

初始状态：在初始化hook的时候通过useState(1)赋值，其中1就是初始状态

useEffect

class组件

import React from 'react';

import { Button, Toast } from 'antd-mobile';

export default class Counter extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      count: 1,

      big: true,

      type: '宽面'

    };

  }

  componentDidMount() {

    if (this.state.type !== '宽面') {

      Toast.info('今天只能吃宽面');

    }

  }

  componentDidUpdate() {

    if (this.state.type !== '宽面') {

      Toast.info('今天只能吃宽面');

    }

  }

  render() {

    const { count, big, type } = this.state;

    const size = big ? '大' : '小';

    return (

      <div>

        <div>来{count}碗{size(big)}碗{type}</div>

        <Button onClick={() => this.setState({ count: count + 1 })} style={{ 'height': '40px' }}>加一碗</Button>

        <Button onClick={() => this.setState({ big: !big })} style={{ 'height': '40px' }}>{size}碗</Button>

        <Button onClick={() => this.setState({ type: '细面' })} style={{ 'height': '40px' }}>不想吃宽面</Button>

      </div>

    );

  }

使用useEffect

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

import { Button, Toast } from 'antd-mobile';

export default function Counter() {

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

  const [big, setSize] = useState(true);

  const [type, setType] = useState('宽面');

  const size = big ? '大' : '小';

  useEffect(() => {

    if (type !== '宽面') {

      Toast.info('今天只能吃宽面');

    }

  });

  return (

    <div>

      <div>老板，来{count}碗{size(big)}碗{type}</div>

      <Button onClick={() => setCount(count + 1)}>加一碗</Button>

      <Button onClick={() => setSize(!big)}>{size}碗</Button>

      <Button onClick={() => setType('细面')}>不想吃宽面</Button>

    </div>

  );

useEffect参数

1、如果什么都不传，会在每次渲染后都执行，也就是说在第一次渲染之后和每次更新之后都会执行。

2、如果传一个空数组，那么就只会运行一次effect，并且effect内部的 props 和 state 会一直拥有其初始值。

3、如果传的是一个包含属性值的数组，那么只有当数组里的值发生变化的时候才会触发useEffect回调。

// 相当于 componentDidMount 和 componentDidUpdate

useEffect(() => {

  console.log(`You clicked ${count} times`);

});

// 由于第二个参数传的是空数组，所以这里相当于componentDidMount

useEffect(() => {

  ...

  // 相当于componentWillUnmount

  return () => {};

}, []);

// 相当于 componentDidMount 和 componentDidUpdate

useEffect(() => {

  console.log(`You clicked ${count} times`);

}, [count]);