React Hooks学习

Hooks

Hooks 是一种函数，该函数允许您从函数式组件 “勾住(hook into)” React 状态和生命周期功能。

有状态组件，就可以使用函数式组件来定义了。

类组件和函数组件

类组件：

import React, { Component } from 'react'
export default class Example extends Component {
    state = {
        count: 0
    }
    addCount() {
        this.setState({ count: this.state.count+1 })
    }
    render() {
        return (
            <div>
                <p>You clicked {this.state.count}</p>
                <button onClick={this.addCount.bind(this)}>Click me</button>
            </div>
        )
    }
}

函数组件：

import React, { useState } from 'react'
function Example() {
  //解构赋值 声明一个新的状态变量，我们将其称为 "count"
    const [count, setCount] = useState(0)
    return (
        <div>
            <p>You Click {count} Times</p>
            <button onClick={() => {setCount(count + 1);console.log(useState);}}>Click me</button>
        </div>
    )
}
export default Example

• useState 返回一对：current state(状态)值和一个允许你更新它的函数。
• 所以用数组解构赋值进行自定义状态。
• React 假定如果多次调用 useState ，则在每次渲染期间以相同的顺序执行。

React 依赖于调用 Hooks 的顺序：（不同的状态的记录是通过useState的执行顺序）

// ------------
// 第一次渲染
// ------------
useState('Mary')           // 1. 用'Mary'初始化名称状态变量
useEffect(persistForm)     // 2. 添加一个 effect 用于持久化form
useState('Poppins')        // 3. 使用 'Poppins' 初始化 surname 状态变量
useEffect(updateTitle)     // 4. 添加一个 effect 用于更新 title
// -------------
// 第二次渲染
// -------------
useState('Mary')           // 1. 读取 name  状态变量（忽略参数）
useEffect(persistForm)     // 2. 替换 effect 以持久化 form
useState('Poppins')        // 3. 读取 surname 状态变量（忽略参数）
useEffect(updateTitle)     // 4. 替换 effect 用于更新 title

使用State Hook

• hooks在class中不起作用
• 如果我们想在状态中存储多个不同的值，我们将调用 useState()多次
• hooks需要一个一个的设置状态值，不能将前后的状态进行合并操作。

初始化state：

import {
    useState } from 'react';
function Example() {
   
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);
  //使用useState(x)来初始化一个状态

读取state：

<p>You clicked {count} times</p>
//函数组件直接读取state值

更新state：

<button onClick={() => setCount(count + 1)}>
  Click me
</button>
//使用setXxx()来更新

使用Effect Hook

可以将 useEffect Hook 视为 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

通过使用Effect Hook ，您可以告诉 React 在渲染后要做些什么，React 将记住传递的函数(我们将把它称为 “effect” )，然后在执行DOM更新后调用它。（类似与类组件中this.setState的第二个回调参数）

• 每次渲染后 useEffect 都会运行。（异步的不影响视图更新）
• 组件内调用 useEffect，Hooks支持JavaScript闭包。
• 可以使用多个useEffect，进行组件的逻辑分解。

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });
  return (
    <div>
      <p>