react总结

关于hooks的系统性整理

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

why use hooks？

1. 在组件之间复用状态逻辑很难
2. 复杂组件变得难以理解
3. 难以理解的 class

react-hooks思想更趋近于函数式编程。用函数声明方式代替class声明方式，虽说class也是es6构造函数语法糖，但是react-hooks写起来函数即是组件，无疑也提高代码的开发效率（无需像class声明组件那样写声明周期，写生命周期render函数等）

Hook-Rules

只在最顶层使用 Hook,不要在循环，条件或嵌套函数中调用 Hook
只在 React 函数中调用 Hook

1. 确保总是在你的 React 函数的最顶层调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。
2. 不要在普通的 JavaScript 函数中调用 Hook
   react官网的规则说明

常用hooks说明

useState

const [state, setState] = useState(initialState)

import React,{
   useState} from "react";
function Example() {
   
  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;

第一行: 引入 React 中的 useState Hook。它让我们在函数组件中存储内部 state。
第三行: 在 Example 组件内部，我们通过调用 useState Hook 声明了一个新的 state 变量。它返回一对值给到我们命名的变量上。我们把变量命名为 count，因为它存储的是点击次数。我们通过传 0 作为 useState 唯一的参数来将其初始化为 0。第二个返回的值本身就是一个函数。它让我们可以更新 count 的值，所以我们叫它 setCount。
第七行: 当用户点击按钮后，我们传递一个新的值给 setCount。React 会重新渲染 Example 组件，并把最新的 count 传给它。

//更新state值-->useState（）
<button onClick={
   () => setCount(count=>count+1)}>Click me</button>
<button onClick={
   () => setPerson({
   name:'chimmy'})}>Click me</button>
//setPerson更新person时，不像 class 中的 this.setState，更新 state 变量总是替换它而不是合并它。上例中的person为{name:'chimmy'} 而不是{name:'chimmy',age:22}

useEffect

可以让你在函数组件中执行副作用（数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用）操作 >>>>useEffect(fn, array)

如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount``componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

useEffect _componentDidMount（初次渲染）

//将第二参数置成空数组
import React, {
    useState, useEffect } from "react";
function Example() {
   
  const [count, setCount] = useState(0);
  useEffect(() => {
   
    console.log("我只会在组件初次挂载完成后执行");
  }, []);
  return (
    <div>
      <p>You clicked {
   count} times</p>
      <button onClick={
   () => setCount(count + 1)}>Click me</button>
    </div>
  );
}
export default Example;

useEffect _componentDidUpdate（初次渲染以及更新渲染）

//如果不传第二个参数，useEffect 会在初次渲染和每次更新时，都会执行。
import React, {
    useState, useEffect } from "react";
function Example() {
   
  const [count, setCount] = useState(0);
  useEffect