React Hooks用法简要概括及其使用规则

React Hooks用法简要概括及其使用规则

Hooks是React v16.7.0-alpha中加入的新特性。它可以让你在class以外使用state和其他React特性。

State Hook

useState(defaultValue)

用法

//需要引入
import {
     useState} from 'react'

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

useState返回第一个是 state 的属性, 第二个是用于修改这个属性的方法.传入参数为该属性的默认值.

通过数组解构赋给了你声明的一个值引用一个函数引用.

上面的代码相当于给 state 添加了 count 属性, 然后 setCount 是更新 count 的方法. 传入的参数0为 count 的默认值.

这个设定的默认值仅仅是用在第一次render执行期间. 后续值更新就和这个默认值无关了.

第一个参数可以是number 可以是 string 可以是对象等等.

方便的是, state hook 不必再写一个函数用于更新, 不必在 constructor 中绑定等等.

Effect Hook

useEffect(function)

用法

不应该在 render 中调用 effect

effect 在 DOM 渲染或者更新完毕后执行.

useEffect在 React 的生命周期中相当于componentDidMount, componentDidUpdate, 和componentWillUnmount 的结合.

不应该在 effect 中更新 state

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

useEffect(() => {
     
  set(count+1);
})

这样将会无限地执行下去.

每次 state 更新后都会生成一个不同的 effect,代替之前的 effect

如果返回一个function, React 将会在 当前 effect 清除(clean up)时执行.

useEffect(() => {
     
  console.log("start")
  return () => {
     console.log("end")}
})

/*
	第一次挂载,输出 start
	state更新后,输出end,然后会因为state的更新紧接着输出一个 start
*/

什么时候清除 effect

React将在组件unmount 的时候执行.

跳过 effect 的执行

当我们希望 state 某个值或者某些值未变时,不执行这个 effect.我们可以这样写:

useEffect(() => {
     }, [..args]);

//代表当 args 中的值没有变的时候,这个 effect 就不执行.


function App() {
     
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const [count3, setCount3] = useState(0);

  useEffect(() => {
     
    console.log("count2 or count3 changed");
  },[count2,count3]);

  useEffect(() => {
     
    console.log("count1 or count2 changed");
  },[count1,count2]);

  useEffect(() => {
     
    console.log("count1 or count3 changed");
  },[count1,count3]);

  return (
    <div className="App">
      <button onClick={
     () => setCount1(count1+1)}>count1</button>
      <button onClick={
     () => setCount2(count2+1)}>count2</button>
      <button onClick={
     () => setCount3(count3+1)}>count3</button>
    </div>
  );
}

如果只想执行一个 Effect 一次(挂载和卸载时),那么可以在 useEffect 的第二个参数中传入空数组.

useEffect(() => {
     }, []);

当然, 第二个参数不填代表任意 state 改变都将触发这个 effect.

Custom Hook(自定义 Hook)

custom hook 是一个名称以 ‘use’ 开头的 function, 它能够使用其他的 Hooks. 下面我们给出一个例子.

import {
      useState, useEffect } from 'react'

function useFriendStatus(friendID){
     
	const [isOnline, setIsOnline] = useState(null);
	
	function handleStatusChange(status){
     
		setIsOnline(status.isOnline);
	}
	
	useEffect(() => {
     
		CharAPI.subscribeToFriendStatus(friendID, handleStatusChange);
		return () => {
     
			CharAPI.subscribeToFriendStatus(friendID, handleStatusChange);
		}
	})
	
	return isOnline;
}

####请以’use’开头作为 custom hook 的函数名,一遍 React 检查 Hooks 规则是否满足.

两个组件使用相同的Hook共享状态吗？ 不会。

自定义挂钩是一种重用有状态逻辑的机制（例如设置订阅和记住当前值），但每次使用自定义挂钩时，自定义挂钩的所有状态和效果都是完全独立的。

自定义Hook如何获得隔离状态？

每次对Hook的调用都会被隔离。因为我们直接调用useFriendStatus，从React的角度来看，我们的组件只调用useState和useEffect。正如我们之前-所知，我们可以在一个组件中多次调用useState和useEffect，它们将完全独立。

Hooks 使用规则

只在顶层使用 Hooks

不能在循环, 条件或者嵌套的函数中使用.

只通过 React 提供的方法调用 Hooks

• 通过Reat 函数组件
• custom Hooks