Hooks入门 #1

urnwangss · 2021-01-28T08:52:51Z

一、设计动机
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>
        );
      }

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hooks入门 #1

Hooks入门 #1

urnwangss commented Jan 28, 2021 •

edited

Loading

Hooks入门 #1

Hooks入门 #1

Comments

urnwangss commented Jan 28, 2021 • edited Loading

urnwangss commented Jan 28, 2021 •

edited

Loading