【React 资料备份】React Hook

Hooks是React16.8一个新增项，是我们可以不用创建class组件就能使用状态和其他React特性

准备工作

• 升级react、react-dom

  npm i react react-dom -S
  

状态钩子 State Hook

• 创建HooksTest.js

  import React, { useState } from "react";
  
  export default function HooksTest() {
    // useState(initialState)，接收初始状态，返回一个状态变量和其更新函数
    const [count, setCount] = useState(0);
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>Click me</button>
      </div>
    );
  }
  

  更新函数类似setState，但它不会整合新旧状态

• 声明多个状态变量

  export default function HooksTest() {
    const [age, setAge] = useState(42);
    const [fruit, setFruit] = useState('banana');
    const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
    return (
      <div>
        <p>年龄 {age}</p>
        <p>水果 {fruit}</p>
        <ul>
            {todos.map(todo=><li key={todo.text}>{todo.text}</li>)}
        </ul>
      </div>
    );
  }
  

副作用钩子 Effect Hook

• 更新HooksTest.js

  import React, { useState, useEffect } from "react";
  useEffect(() => {
  	// Update the document title using the browser API
      document.title = `您点击了 ${count} 次`;
  });