React Hook使用

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

对比于以前react class的写法，可以把useEffect看做
componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

自定义Hook

所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用use前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为
usexxx。

参考资料

React Hooks 入门教程
http://www.ruanyifeng.com/blog/2019/09/react-hooks.html
react 16.7 hook概述
https://www.jianshu.com/p/e61faf452565
hook详解
https://blog.csdn.net/tonydz0523/article/details/106479182
React Hooks 拓展钩子和自定义Hook的使用
https://www.jianshu.com/p/0510d6f83dce
理解React Hooks
https://www.jianshu.com/p/d6244228a427