这是我参与「第五届青训营」伴学笔记创作活动的第 12 天

概述

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

经过多年的实战和发展，函数组件是一个更加匹配React的设计理念 UI = f(data)，也更有利于逻辑拆分与重用的组件表达形式，而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以拥有自己的状态，所以从react v16.8开始，Hooks应运而生

Hooks解决了组件的状态逻辑复用和class组件自身的问题

函数式组件相比类组件状态更加灵活，简化了学习成本，简化了如生命周期，this指向等问题

重要的hooks

useState

作用：useState为函数组件提供状态，可以类比vue里的双向绑定（个人感觉）

import { useState } from 'react'

function App() {
  // 参数：状态初始值比如,传入 0 表示该状态的初始值为 0
  // 返回值：数组,包含两个值：1 状态值（state） 2 修改该状态的函数（setState）
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}
export default App

注意事项

只能出现在函数组件或者其他hook函数中
不能嵌套在if/for/其它函数中

如果初始化参数是需要计算得到的,可以考虑传入一个箭头函数,里面的返回值作为初始值,来达到计算的目的

useEffect

对于一个函数式组件来说,主要是根据数据来渲染ui,除此以外的都是副作用

如

数据请求
手动修改dom
localStorage操作

这些操作可以靠useEffect来解决

依赖项控制副作用的执行时机

不添加依赖项

更新时机

组件初始渲染
组件更新（不管是哪个状态引起的更新）

useEffect(()=>{
    console.log('副作用执行了')
})

添加空数组

更新时机

首次渲染

useEffect(()=>{
	 console.log('副作用执行')
},[])

添加特定依赖项

更新时机,首次渲染时执行,依赖项发生变化时重新执行

function App() {  
    const [count, setCount] = useState(0)  
    const [name, setName] = useState('初始名字') 
    
    useEffect(() => {    
        console.log('副作用执行')  
    }, [count])  
    
    return (    
        <>      
         <button onClick={() => { setCount(count + 1) }}>{count}</button>      
         <button onClick={() => { setName('更新后的名字') }}>{name}</button>    
        </>  
    )
}

参考

字节跳动课程笔记

b站视频

react函数式组件 ｜ 青训营笔记

概述