Hooks基本使用

对于习惯vue和react的class 基于生命周期开发的同学来说，在开始使用Hooks的时候，总
是会把class开发和 Hooks开发进行一一的比对，希望在hooks中找到class开发对应的替代
方式，也许这种想法就是有问题的。
学习Hooks前，可以忘记你的class写法。

最简单的Hooks

class 版本的有状态组件：

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

再来看看hooks后的版本：

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

声明变量：

import React, { useState } from 'react';
function Example() {
  const [count, setCount] = useState(0);
}

useState 方法作用和class的 this.state 提供的功能完全相同。 唯一参数就是初始state，返回值是一个数组，数组第一个项目是变量，第二项是的改变改值的方法。 解构出来 count 和 setCount 相当于class组件的 this.state.count 和 this.setState

一个组件有多个状态值怎么办

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

useEffect

useEffect(createHandle, [deps])

官方解释：

该 Hook 接收一个包含命令式、且可能有副作用代码的函数。 在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。 使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在 组件渲染到屏幕之后执行。

可以注意到，useEffect的函数是在的组件渲染到DOM后执行。 useEffect的第二个参数deps, 只是createHandle 执行的 条件：

[]: 首次渲染执行
[stateA]: 变量stateA 变化才执行
[stateA, stateB]: 变量stateA 或 stateB 变化时就执行
没有值： 每次渲染后都会执行

function Example() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  }, [count]);

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

正确的应用useState和useEffect, 能够完成很多基本的需求。 其他的Hook，可以根据需求酌情使用

参考资料 使用 Effect Hook： react.docschina.org/docs/hooks-… React技术揭秘: react.iamkasong.com/