长沙出名的网站设计推广,扁平化设计风格网站,郑州网站设计制作价格,宠物主题网站模板react的组件分为类组件和函数组件#xff0c;Hook 是一种特殊的函数#xff0c;可以让你在函数组件中使用类组件中才有的一些特性。useState、useEffect、useReducer都是Hook。其中useState用于在函数组件中添加状态#xff0c;useEffect用于在函数组件中执行副作用#xf…react的组件分为类组件和函数组件Hook 是一种特殊的函数可以让你在函数组件中使用类组件中才有的一些特性。useState、useEffect、useReducer都是Hook。其中useState用于在函数组件中添加状态useEffect用于在函数组件中执行副作用而useReducer则是useState的加强版。在 React 中“副作用”side effect通常指的是那些在组件渲染之外发生的操作即那些不直接参与 UI 渲染的行为。这些副作用可以包括数据获取、订阅服务、记录日志、修改 DOM、设置定时器等任何与组件渲染本身无关的操作。
一、useState
react、vue这类框架我看都属于单页面应用SPA。也就是所有的内容呈现都在一张页面中完成。我们所看到的其中千变万化内有乾坤都是javascript控制的结果。javascript改变页面中变量或元素的值页面需要重新渲染才能反映最新结果。那么如何才能让页面重新渲染反映最新结果呢在vue中大概就是要将变量声明为所谓响应式比如
const state reactive({v1:0,v2:false
})而在react中就稍有点复杂。react也是组件式开发但它的组件分为类组件和函数组件。类组件出现时间较早较为笨重函数组件是后来才有的相对较为轻盈且越来越流行。当然类组件也不可或缺各自有适用场景。比如当需要用到生命周期事件时就要使用类组件。比如组件加载完毕就怎样怎样组件卸载又如何如何诸如此类。
react中如果是类组件使用 this.state 来定义组件的状态使用 this.setState() 方法来更新状态。如果是函数组件则使用useState来设置状态。
1、类组件中控制状态
import React, { Component } from react;class Counter extends Component {constructor(props) {super(props);this.state {count: 0};this.handleIncrement this.handleIncrement.bind(this);this.handleReset this.handleReset.bind(this);}handleIncrement() {this.setState(prevState ({count: prevState.count 1}));}handleReset() {this.setState({ count: 0 });}render() {return (divpCount: {this.state.count}/pbutton onClick{this.handleIncrement}Increment/buttonbutton onClick{this.handleReset}Reset/button/div);}
}export default Counter;2、函数组件中使用useState控制状态
useState 接受一个参数作为初始状态并返回一个包含两个元素的数组
import React, { useState } from react;function Example() {// 设置初始状态为 0const [count, setCount] useState(0);return (divpYou clicked {count} times/pbutton onClick{() setCount(count 1)}Click me/button/div);
}二、useReducer
useReducer是useState的威力加强版也就是说它也只用在函数组件中。useReducer 通常用于替代 useState当状态逻辑变得更加复杂时使用 useReducer 可以让代码更易于理解和维护。
useReducer 接受一个 reducer 函数和一个初始状态作为参数并返回一个包含当前状态和一个 dispatch 函数的数组。其中reducer函数是自定义的主要是根据参数来设置各个状态值。也就是说useState设置一个状态值而useReducer可以设置多个状态值。而dispatch函数则负责执行reducer函数。真绕啊
import React, { useReducer } from react;function counterReducer(state, action) {switch (action.type) {case increment:return { count: state.count 1 };case decrement:return { count: state.count - 1 };case reset:return { count: 0 };default:throw new Error();}
}function Counter() {const [state, dispatch] useReducer(counterReducer, { count: 0 });return (divpCount: {state.count}/pbutton onClick{() dispatch({ type: increment })}Increment/buttonbutton onClick{() dispatch({ type: decrement })}Decrement/buttonbutton onClick{() dispatch({ type: reset })}Reset/button/div);
}export default Counter;三、useEffect
useEffect用于在函数组件中执行副作用操作。副作用可以包括数据获取、订阅服务、记录日志、直接操作 DOM 等与渲染本身不直接相关的操作。
1、类组件执行副作用操作
类组件可以通过生命周期方法来处理副作用例如
componentDidMount 用于在组件挂载后执行副作用。 componentDidUpdate 用于在组件更新后执行副作用。 componentWillUnmount 用于在组件卸载前清理副作用。
2、函数组件中执行副作用操作
函数组件可以使用 useEffect Hook 来处理副作用。useEffect就是类组件中上述三个生命周期方法componentDidMount 、componentDidUpdate、componentWillUnmount的综合体。
useEffect 接受一个回调函数作为第一个参数该回调函数会在组件渲染之后执行。它还可以接受一个可选的依赖项数组作为第二个参数该数组定义了哪些变量的变化会导致副作用回调重新运行。
import React, { useState, useEffect } from react;function Example() {const [count, setCount] useState(0);useEffect(() {document.title You clicked ${count} times;// 清理副作用return () {document.title React App;};}, [count]); // 依赖项数组只在 count 改变时运行return (divpYou clicked {count} times/pbutton onClick{() setCount(count 1)}Click me/button/div);
}当 useEffect 的依赖项数组为空时这意味着副作用回调函数仅会在组件挂载完成后运行一次并且在组件卸载前运行清理函数如果有的话。这是因为空数组 [] 表示没有任何依赖项所以副作用回调不会因为任何状态或属性的变化而重新运行。
import React, { useEffect } from react;function Example() {useEffect(() {console.log(Component mounted);// 设置一个定时器const timer setInterval(() {console.log(Timer tick);}, 1000);// 清理副作用return () {console.log(Component will unmount);clearInterval(timer); // 清除定时器};}, []); // 依赖项为空数组return (divpHello, World!/p/div);
}四、Hook
1、Hook专属于类组件
在 React 中Hooks 是一种允许在函数组件中使用状态和其他 React 特性的机制。Hooks 使得函数组件能够具有与类组件相同的功能同时保持代码的简洁性和可读性。
2、Hooks 的规则
为了确保 Hooks 正确工作需要遵循以下规则 只在顶层调用 Hooks不要在循环、条件或嵌套函数内部调用 Hooks。 只在 React 函数中调用 Hooks不要在普通的 JavaScript 函数中调用 Hooks。 通过遵循这些规则可以确保 Hooks 在每次渲染时都按照预期工作并且状态管理逻辑是可预测的。
3、常用Hooks
一些常用的 Hooks
useState 用于在函数组件中添加状态。它接受一个初始值并返回一个状态值和一个更新该状态的方法。
useEffect 用于执行副作用操作如数据获取、订阅或手动更改 DOM。它类似于类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount。
useContext 用于消费 React Context 对象中的值。这比使用 Consumer 组件或 withContext 高阶组件更简洁。
useReducer 类似于 useState但它允许你使用 Reducer 模式管理状态这对于复杂的组件状态非常有用。
useCallback 用于返回一个被优化过的函数引用以避免在每次渲染时创建新的函数。
useMemo 用于缓存昂贵的计算结果以避免在每次渲染时重新计算。
useRef 创建一个可变的引用对象。它的 .current 属性被初始化为传递的参数initialValue。返回的对象将在组件的整个生命周期内保持不变。
useImperativeHandle 自定义暴露给父组件的 ref 的值。
useLayoutEffect 类似于 useEffect但在所有 DOM 更新完成后同步运行。这使得它适合于布局相关的操作。
五、副作用
在 React 中术语“副作用”side effect用来描述那些不在组件渲染过程中直接发生的操作。换句话说副作用是指那些在组件的生命周期中执行的、与 UI 渲染逻辑无关的操作。这些操作可能会对应用程序的状态、DOM 或外部系统产生影响。
1、为什么称为“副作用”
副作用这个词来源于函数式编程的概念在函数式编程中一个纯粹的函数只依赖于它的输入参数并且只产生输出而不修改任何外部状态。在这样的环境中函数不应该有除了返回值之外的任何其他效果。然而在实际的编程中特别是在 React 这样的框架中我们经常需要执行一些非纯粹的操作比如数据获取、DOM 操作、设置定时器等。这些操作虽然不是纯粹的但对于应用程序的正常运行是必不可少的。
在 React 中常见的副作用包括但不限于
1数据获取: 从服务器或其他数据源获取数据。 通常在组件加载时或状态/属性发生变化时执行。
2订阅服务: 订阅 WebSocket、RSS Feed 或其他实时数据流。 在组件卸载时取消订阅以避免内存泄漏。
3设置定时器: 使用 setTimeout 或 setInterval 来执行延迟或周期性的任务。 在组件卸载时清除定时器以避免内存泄漏。
4记录日志: 记录用户交互或调试信息。 不直接影响 UI 的渲染过程。
5直接操作 DOM: 修改页面上的元素而不是通过 React 的虚拟 DOM。 这种做法一般不推荐但在某些情况下可能是必需的。
2、为什么需要处理副作用
处理副作用很重要因为它们有助于组件与外部世界交互例如从服务器获取数据或更新外部服务的状态。此外适当的清理副作用也很重要以避免内存泄漏或不必要的资源消耗。
