react中的hooks

react hooks

Hooks 介绍

https://zh-hans.reactjs.org/docs/hooks-intro.html

   react hooks是v16.8新增的特性， 他允许你在不写class（即：函数式组件）的情况下操作state 和react的其他特性（如：生命周期的钩子函数---也是类组件，函数式组件没有）。

类组件有state，函数式组件没有state，但是，我们又要用。。。。。

    hooks 只是多了一种写组件的方法，使编写一个组件**更简单更方便**，同时可以自定义hook把公共的逻辑提取出来，让逻辑在多个组件之间共享。

​ Hook 是什么？ Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。例如，useState 是允许你在 React 函数组件中添加 state 的 Hook。

    函数式组件里面没有state，所以，无状态组件我们用函数写，或者说函数式组件是无状态组件。而现在有了Hook后，函数式组件里，也可以使用state了。当然还有其它Hook

使用规则

• Hook可让您在不编写类（组件）的情况下使用状态（state）和其他React功能
• 只能在顶层调用Hooks 。不要在循环，条件或嵌套函数中调用Hook
• 只能在functional component或者自定义钩子中使用Hooks
• 钩子在类内部不起作用，没有计划从React中删除类

useState （使用状态）：

格式：

// 1、定义状态：
const [状态名，更新状态的函数] = React.useState(初始值|函数);
// 如：
// 声明一个新的叫做 “count” 的 state 变量，初始值为0 。
const [count, setCount] = React.useState(0); //useState函数返回的是数组
// 相当于类组件中的
this.state={
    count :0
}
const [person, setPerson] = React.useState({name: '啦啦啦', age: 18,sex:"女"})
const [person, setPerson] = React.useState(() => ({name: '啦啦啦 ', age: 18,sex:"女"}))
// 2、读取值： 
{count}
{person.name}   {person.age}
// 3、修改值：  
  setCount(5);
  //对于引用类型，不能局部更新（即：不能只改某个属性），所以，需要使用扩展运算符先拷贝以前所有的属性
  setPerson({
     ...person, //拷贝之前的所有属性
     age:person.age+1,
     name: '芬芬' //这里的name覆盖之前的name
 })

注意：

    首先，需要知道，函数式组件重新渲染时，会执行函数里的所有代码

    那么，当函数式组件重新渲染时，会不会再次把状态的值恢复成初始值呢？答案是：不会。后续组件重新渲染时，会使用最后一次更新的状态值

【官网解释： React 会确保 setState 函数的标识是稳定的，并且不会在组件重新渲染时发生变化 】
示例代码：

//useState--数据是基本类型
// 1.引入react，解构useState
import React,{useState} from 'react';
// 函数式组件
function App() {
  //定义状态
// 声明一个叫 "count" 的 state 变量
  const [count,setCount] = useState(0); //在App组件重新后，useState 返回的第一个值将始终是更新后最新的 count。
// return出jsx 
  return (
    <div className="App">
      <p>count：{count}</p>
      <input type="button" value="测试" onClick={()=>{setCount(count+1)}} />
    </div>
    //1--不能直接赋值{setCount(count+1)}}-- 需要用箭头函数--如果直接赋值，就会是一个无限循环
  );
  //2--不能直接定义一个const   let const=0，需要钩一下useState 进行渲染,直接定义并不是不能改变，但一定不能渲染，
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DdGPScZP-1628263619454)(C:\Users\何小仙\AppData\Roaming\Typora\typora-user-images\1628061449964.png)]

对应的函数class组件：

class App extends React.Component {
  state = {
      count:0
  }
  render = () => (
    <div>
       <p>{this.state.count}</p>
       <input type="button" value="测试" 
      onClick={()=>this.setState({count:this.state.count+1})} />
    </div>
  )
}

我们之前把函数式的组件叫做“无状态组件”。但现在我们为它们引入了使用 React state 的能力
再如：(文字版）

//useState--数据是对象--引用类型
function App() {
  const [person, setPerson] = React.useState({name: '小王八 ', age: 18})
 
  const onClick = () =>{
    //setPerson不可以局部更新，如果只改变其中一个，那么整个数据都会被覆盖，所以，需要使用扩展运算符先拷贝以前所有的属性
    setPerson({
        ...person, //拷贝之前的所有属性
        age:person.age+1,
        name: '大王八' //这里的name覆盖之前的name
    })
  }
  return (
    <div className="App">
        <p>name:{person.name}</p>
        <p>age:{person.age}</p>
        <input type="button"  value="测试" onClick={onClick} />
    </div> 
  );
}

useEffect 处理副作用 （生命周期钩子函数）

    可以使得你在函数组件中执行一些带有副作用的方法（大脑中无数个？？？？）。

​ 每当 React组件更新之后，就会触发 useEffect，在第一次的render–渲染 和每次 update 后的render触发，不用再去考虑“初次挂载”还是“更新”。React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。

组件更新后想干点啥，就写再useEffect，不用考虑—更新

    你可以把 `useEffect` Hook 看做 `componentDidMount`，`componentDidUpdate`---渲染完毕做的事 和 `componentWillUnmount` 这三个函数的组合。

​ 我们在函数式组件里，没有 componentDidMount，componentDidUpdate 和 componentWillUnmount，用useEffect。即：当数据发生变化后，渲染到组件上，组件渲染完毕后，就会调用useEffect。
格式：

useEffect(回调函数，[依赖]); //在render之后触发useEffect，进一步调用回调函数

1、useEffect的无条件执行（只有一个参数）

import React,{
   useState,useEffect} from 'react';
function App() {
   
  const [count,setCount] = useState(0);
  
  //useEffect:相当于 componentDidMount，componentDidUpdate
  useEffect(()=>{
   
  //数据更新后想干啥，就在这里面写
      console.log("userEffect");
      document.title = count;
  });
  return (
    <div className="App">
      <p>{
   count}</p>
      <input type="button" value="测试" onClick={
   ()=>{
   setCount(count+1)}} />
    </div>
  );
}

2、useEffect的条件执行（useEffect的第二个参数）
​ 当useEffect只有一个参数时，会无条件执行，但是，当发送请求时（页面的初始数据来自后端），一旦把请求放在useEffect里，就会无休止的执行，因为，当请求的数据回来后，引起组件的更新，组件更新后，再次触发useEffect，再次发送请求，再次组件更新………………，陷入到了无限的死循环。那么，可以使用useEffect的第二个参数。
​ 首先，
​ useEffect的首次触发（componentDidMount）是肯定会执行的。
​ 其次：
​ 第二个参数表示，二次触发的依赖条件（componentDidUpdate的触发条件）。

如：useEffect(()=>{}，[count]) //表示count的值发生变化才会触发useEffect。

如：useEffect(()=>{}，[]) //表示useEffect不依赖任何值，即：不会有二次触发（componentDidUpdate）。
​
​ 如下代码，由于依赖是空，所以，useEffect只表示componentDidMount。

 useEffect( async ()=>{
   
      let data = await getBooks();  //发送请求的代码已经封装     
      setBooks(data); 
  },[]);

  如下代码，表示componentDidMount，和 count变化后引起的componentDidUpdate。

 useEffect( async ()=>{
   
      let data = await getBooks();  //发送请求的代码已经封装     
      setBooks(data);      
  },[count]);

useRef 保存引用值

https://reactjs.bootcss.com/docs/hooks-reference.html#useref
​ useRef 返回一个可变的 ref 对象，其(ref 对象) .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

hooks中可以通过 useRef()获取Dom节点

//引入 解构 声名 输出渲染
import {useRef} from "react";
//可变的 ref 对象  其(ref 对象) `.current` 属性被初始化为传入的参数（`initialValue`）
let refContainer = useRef(initialValue) 

<JSX ref={refContainer} ...
refContainer.current.dom操作

一个常见的用例便是命令式地访问子组件：

//函数式组件
function TextInputWithFocusButton() {
    //定义了一个ref变量：inputEl
  const inputEl = useRef(null);
    //console.log(inputEl.current)--输出就是null
  
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
      //点击的时候获取焦点--改变value
    inputEl.current.focus();
     inputEl.current.value="皮皮虾"
       
  };
    
  return (
    <div className="App">
      //在这里传给ref
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}