Hooks入门

[urnwangss]

一、设计动机
1、组件之前复用状态逻辑很难
2、复杂组件变得难以理解
3、南里理解的Class

二、相关使用
1、useState
// useState 是最简单的一个 hook
// 唯一需要注意的是不要尝试在循环或条件等不稳定的代码结构中编写
// 原因在这里 -> brickspert/blog#26

      import React from 'react';
      const { useState } = React;

      export default function UseState() {
        const [num1, setNum1] = useState(0);
        const [num2, setNum2] = useState(0);
        console.warn('render');
        return (
          <div>
            useState Demo
            <h4>num1:{num1}</h4>
            <h4>num2:{num2}</h4>
            <button onClick={() => setNum1(num1 + 1)}>add num1</button>
            <button onClick={() => setNum2(n => n + 1)}>add num2</button>
          </div>
        );
      }
   

    2、useEffect
       // useState 是最简单的一个 hook
      // 唯一需要注意的是不要尝试在循环或条件等不稳定的代码结构中编写
      // 原因在这里 -> https://github.com/brickspert/blog/issues/26

      import React from 'react';
      const { useState } = React;

      export default function UseState() {
        const [num1, setNum1] = useState(0);
        const [num2, setNum2] = useState(0);
        console.warn('render');
        return (
          <div>
            useState Demo
            <h4>num1:{num1}</h4>
            <h4>num2:{num2}</h4>
            <button onClick={() => setNum1(num1 + 1)}>add num1</button>
            <button onClick={() => setNum2(n => n + 1)}>add num2</button>
          </div>
        );
      }