React中的hook

hook

hook:是可以让你在函数组件中使用React state及生命周期的函数，简单说就是通过hook可以让我们的函数组件有状态和生命周期，并且hook不能用在class组件中

注意在使用hook有两个规则

• 只能在函数最外层调用hook，不能再循环、条件判断或者子函数中调用
• 只能在函数组件中使用hook

错误使用例子：

import React, { useState , useEffect} from 'react';
function Example() {
    for(let i =0; i<10; i++) {
        const [age,setAge] = useState(17) //这是错误的
    }
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}
export default Example

例子：在Example中使用函数组件

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>
    );
}
export default Example

useState

useState:用来定义函数状态,与class中设置this.state一样
用法：
useState(init)：需要传递初始化的值
返回值：
const [age,setAge] = useState(17) 返回当前state和更新state的函数，如果要声明多个state就要调用多次useState

import React, { useState , useEffect} 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>
    );
}
export default Example

useEffect

useEffect:类型class组件中的componentDIdMount、componentDidUpdate、componentWillUnmount这些生命周期组合
useEffect:会在每次渲染之后调用，第一次渲染也会调用，一般当我们想在dom更新之后操作dom或者处理一下网络请求就需要使用useEffect

import React, { useState , useEffect} from 'react';

function Example() {
    // 声明一个叫 “count” 的 state 变量。
    const [count, setCount] = useState(0);
    useEffect(() => {
        // 使用浏览器的 API 更新页面标题
        document.title = `You clicked ${count} times`;
    });
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}
export default Example