React Hooks一 useState() 、useEffect()

最新推荐文章于 2024-11-17 17:17:33 发布

森林的尽头是阳光

最新推荐文章于 2024-11-17 17:17:33 发布

阅读量346

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react hooks useState useEffect

本文链接：https://blog.youkuaiyun.com/sinat_41904410/article/details/111191947

react 专栏收录该内容

11 篇文章

订阅专栏

本文深入浅出地介绍了React中的useState Hook用于状态管理，以及useEffect Hook的生命周期管理和副作用操作。通过实例演示如何在组件中添加状态和执行异步操作，为理解React组件更新机制提供实用指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

useState()
useEffect()

useState(）

1. 使用

// 声明一个叫 “count” 的 state 变量，他的初始值是0
const [count, setCount] = useState(0)

2. 参数
唯一的参数就是初始state，可以是数字、字符串、对象、数组等等

3. 返回值
返回当前的state，和更新state的函数，所以声明使用解构赋值的写法

4. 使用
变量使用：直接 {count}
变量更新：setCount(要更新的值)

5. 使用多个变量

 // 声明多个 state 变量
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: '学习 Hook' }]);

6. 计数器实例

import React,{useState} from 'react'


export default function Count(){
    const [count, setCount] = useState(0)
    return(
        <div>
            <p>你点击了{count}次</p>
            <button onClick={()=> setCount(count+1)}>点击加一</button>
        </div>
    )
}

useEffect()

1. 概念

可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
告诉 React 组件需要在渲染后执行某些操作
一般情况下可以在这个函数中获取接口数据
默认情况下，它在第一次渲染之后和每次更新之后都会执行

2. 实例

import React,{useState,useEffect} from 'react'

export default function UseEffect(){
    const [count, setCount] = useState(0)
    useEffect(()=>{
        document.title=`你点击了${count}次`
        console.log(document.title)
    })
    return (
        <div>
            <p>你点击了{count}次</p>
            <button onClick={()=>setCount(count+1)}>点我</button>
        </div>
    )
}

3. 无需清除的effect

不需要返回

useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

4. 需要清除的effect

比如订阅消息
需要清除的副作用，需要返回一个函数：

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

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

5. effect也可以使用多个分割

按代码用途分离
react将按照effect声明的顺序依次调用组件中的每一个effect

6. useEffect() 第二个参数

不传值：每次render都会调用
传([])空数组：只会调用一次
传入特定参数数组：数组中参数改变时调用
对有清除操作的effect同样适用
实现性能优化

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新