React——hook的使用

hook的本质

hook的本质是“钩子”，他的作用是“钩入”react的特征。例如在函数组件中没有“状态state，生命周期（挂载mount、卸载unmount）”等，但是可以通过使用hook钩入。

hook的命名规则

hook（钩子）必须要以“use”开头。如：useState、useEffect。自定义的hook也要用“use”开头。

点击了解相关hook的规则

useState

useState是保存状态的hook，等同于class中的this.state。React会在重复渲染时记住它当前的值，并且提供最新的值给我们的函数。

注：
可以设置多个useState
useState的参数可以是字符串、数字或者是对象。

声明state变量

useState的常规定义，以数组解构的方式定义State。
通用公式：const [state名 setState名] = useState(初始值);

例如：const [count, setCount]=useState(0); 代表的含义是：设置一个名为count的state变量，其初始值为0。

读取state

可以直接使用count

<p>You clicked {count} times</p>

更新state

调用setCount来更新当前state

<button οnclick={()=>setCount(count+1)}>
	Click me
</button>

小示例

import React,{useState} from 'react'

export default funciotn Example(){
	const [count, setCount]=useState(0);
	return(
		<div>
			<p>You clicked {count} times</p>
			<button οnclick={()=>setCount(count+1)}>
				Click me
			</button>
		</div>
	)
}

useEffect

在函数组件中执行副作用操作。useEffect在第一次渲染之后和每次更新之后都会执行。React保证了每次运行effect的同时，DOM都已经更新完毕。

使用useEffect

通用公式：useEffect( () => { 执行内容 } )

例如：useEffect(()=>{document.title=‘You clicked ${count} times’;})
当React组件需要在渲染后，执行useEffect改变网页标题

小示例

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在点击按钮后，react渲染网页，执行useEffect，更新网页的title。