react--Hooks基础

一、hooks概念理解

React体系里组件分为 类组件 和 函数组件

经过多年的实战，函数组件是一个更加匹配React的设计理念 UI = f(data)，也更有利于逻辑拆

分与重用的组件表达形式，而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以

拥有自己的状态，所以从react v16.8开始，Hooks应运而生

注意：

hooks只能在函数组件中使用

二、useState

1、基础使用

使用步骤

1.导入useState函数

2.执行这个函数并传入初始值 必须在函数组件中

3.[数据, 修改数据的方法]

4.使用数据 修改数据

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0)
  
  return (
    <div className="App" style={{width: '30%',border: '2px solid #111',padding: '5px'}}>
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div>
  );
}

export default App;

2、状态的读取和修改

const [count, setCount] = useState(0)  // 解构赋值 useState返回值是一个数组

1、useState传过来的参数 作为count的初始值

2、 [count, setCount] 名字可以自定义保持语义化

 顺序不可以变 第一个参数是数据状态 第二个参数是修改数据的方法

3、setCount函数

用来修改count 依旧保持不能直接修改原值还是生成一个新值替换原值

setCount(基于运算得到的新值)

4、count和setCount是一对 是绑在一起的 setCount只能用来修改对应的count值

3、组件的更新过程

当调用setCount时 更新的过程

1、首次渲染

首次被渲染的时候 组件内部代码会被执行一个

其中useState也会跟着执行 重点 初始值只在首次渲染生效

2、更新渲染 setCount都会更新

1.app组件会再次渲染 这个函数再次执行

2.useState再次执行 得到的新的count值不是0而是修改后的1 模板会用新增渲染

重点：

useState初始值只在首次渲染生效 后续只要调用setCount整个app中代码都会执行

此时count每次拿到的都是最新值

import { useState } from "react";

function App() {
  // count:数据状态
  // setCount:修改count的函数(专有函数)

  // useState 函数可以执行多次，每次执行互相独立，每调用一次为函数组件提供一个状态
  const [count, setCount] = useState(0)

  const [show, setShow] = useState(false)

  const [list, setList] = useState([])
  
  function test() {
    setShow(true)
    setList([1,2,3,4])
    console.log(show,list)
  }

  return (
    <div className="App" style={{width: '30%',border: '2px solid #111',padding: '5px'}}>
      <button onClick={() => setCount(count + 1)}>count:{count}</button>
      <button onClick={test}>show:{show?'true':'false'}---list{list}</button>
    </div>
  );
}


export default App;

注意事项：

1. 只能出现在函数组件或者其他hook函数中

2.  不能嵌套在if/for/其它函数中（react按照hooks的调用顺序识别每一个hook）

let num = 1
function List(){
  num++
  if(num / 2 === 0){
     const [name, setName] = useState('cp') 
  }
  const [list,setList] = useState([])
}
// 俩个hook的顺序不是固定的，这是不可以的！！！

三、useEffect  副作用

对于 React 组件来说，主作用就是根据数据（state/props）渲染 UI，除此之外都是副作用（比如，手动修改 DOM）

1、基础使用

在修改数据直接 把count值放到页面标题中

1.导入uerEffect函数

2.在函数组件中执行 传入回调 并定义副作用

3.当我们通过修改状态更新组件时，副作用也会不断执行

2、依赖项控制执行时机

1.默认状态(无依赖项) 组件初始化时先执行一次 等每次数据修改更新再次执行

2.添加空数组依赖项 组件只在首次渲染时执行一次 其余时间不执行

3.添加特定依赖项 副作用函数在首次渲染时执行，在依赖项发生变化时再次执行

4.注意事项: 只要在useEffect 回调函数中用到的数据（比如，count）就是依赖数据，就应该出现在依赖项数组中，如果不添加依赖项就会有bug出现

import { useState } from "react";
import { useEffect } from "react";

function App() {
  const [count, setCount] = useState(0)

  const [name, setName] = useState('')
  
  // 1、
  // useEffect(() =>{
  //   // 定义副作用
  //   document.title = count
  // })

  // 2、
  // useEffect(() =>{
  //   // 只在首次渲染时执行一次
  //   document.title = count
  // },[])

  // 3、
  useEffect(() =>{
    console.log('副作用执行')
    // 定义副作用
    document.title = count
  },[count])

  return (
    <div className="App" style={{width: '30%',border: '2px solid #111',padding: '5px'}}>
      <button onClick={() => setCount(count + 1)}>count:{count}</button>
      <button onClick={() => setName('ddd')}>name:{name}</button>
    </div>
  );
}

export default App;

注意：

某种意义上 hook的出现 就是想不用生命周期概念也可以写业务代码