import React, { useEffect, useState } from 'react';
- 告别了令人疑惑的生命周期
- 告别类组件中烦人的this
- 告别繁重的类组件,回归到了熟悉的函数组件
useState
文章来源:https://www.toymoban.com/news/detail-709957.html
1.基础使用
import { useState } from 'react' function App() { // 参数:状态初始值比如,传入 0 表示该状态的初始值为 0 // 返回值:数组,包含两个值:1 状态值(state) 2 修改该状态的函数(setState) const [count, setCount] = useState(0); // 修改count内容 const modifyEvent = () => { setCount(count + 1) } return ( <button onClick={() => modifyEvent()}>{count}</button> ) } export default App
2.状态的读取和修改执行流程与逻辑
1.setCount是一个函数,参数表示最新的状态值
2.调用该函数后,将使用新值替换旧值
3.修改状态后,由于状态发生变化,会引起试图变化 注意
事项:修改状态的时候,一定要使用新的状态替换旧的状态,不能直接修改旧的状态,尤其是引用类型
3. 组件的更新过程
1.组件第一次渲染
- 从头开始执行该组件中的代码逻辑
- 调用 useState(0) 将传入的参数作为状态初始值,即:0
- 渲染组件,此时,获取到的状态 count 值为: 0
2.组件第二次渲染
- 点击按钮,调用 setCount(count + 1) 修改状态,因为状态发生改变,所以,该组件会重新渲染
- 组件重新渲染时,会再次执行该组件中的代码逻辑
- 再次调用 useState(0) ,此时 React 内部会拿到最新的状态值而非初始值,比如,该案例中最新的状态值为 1
- 再次渲染组件,此时,获取到的状态 count 值为:1
import { useState } from 'react' function App() { const [count, setCount] = useState(0) // 在这里可以进行打印 console.log(count,'渲染了') return ( <button onClick={() => { setCount(count + 1) }}>{count}</button> ) } export default App
4.使用规则
function List(){ // 以字符串为初始值 const [name, setName] = useState('cp') // 以数组为初始值 const [list,setList] = useState([]) }
2.useState 注意事项
- 只能出现在函数组件或者其他hook函数中
- 能嵌套在if/for/其它函数中(react按照hooks的调用顺序识别每一个hook)
useEffect
1.理解函数副作用
- 数据请求 ajax发送
- 手动修改dom
- localstorage操作
2. 基础使用
下面案例说明,函数组件储存了当前state所有状态,函数初次就会触发他们两个的加载,另外当某一个发生改变了 useEffect和函数都会被重新执行加载
import { useEffect, useState } from 'react' function App() { const [count, setCount] = useState(0) useEffect(()=>{ // 修改了dom数据后 userffect函数被副作用重新执行 console.log('执行了副作用函数') }); // 函数组件也会被重新执行 console.log('函数组件被重新执行了') return ( <button onClick={() => { setCount(count + 1) }}>{count}</button> ) } export default App
3.useEffect依赖项和控制执行的时机
import { useEffect, useState } from 'react' function App() { const [count, setCount] = useState(0) useEffect(()=>{ // 修改了dom数据后 userffect函数不会在被触发,只有首次加载函数才会执行一次 console.log('执行了副作用函数') },[]); //修改了dom数据后 函数组件会被重新执行 console.log('函数组件被重新执行了') return ( <button onClick={() => { setCount(count + 1) }}>{count}</button> ) } export default App
添加特定项作为依赖
副作用函数在首次渲染时执行,在依赖项发生变化时重新执行
给useEffect添加特定的依赖项,当这个依赖性的state发生改变,useEffect与函数组件都会重新渲染被执行,由于第二个参数是依赖项所以是数组可以添加多个依赖项
没有useEffect添加的特定的依赖项,就不会触发useEffect函数,只会触发组件的渲染函数
function App() { const [count, setCount] = useState(0) const [name, setName] = useState('zs') useEffect(() => { console.log('副作用执行了') }, [count]) console.log('组件被执行了') return ( <> <button onClick={() => { setCount(count + 1) }}>{count}</button> <button onClick={() => { setName('cp') }}>{name}</button> </> ) }
清理副作用
function App() { const [count, setCount] = useState(0) const [name, setName] = useState('zs') useEffect(() => { console.log('副作用执行了') return () => { alert(1) console.log('执行了清楚副作用,组件卸载的时候执行') } }, [count]) console.log('组件被执行了') return ( <> <button onClick={() => { setCount(count + 1) }}>{count}</button> <button onClick={() => { setName('cp') }}>{name}</button> </> ) }
useMemo(性能优化)
解决函数组件的性能问题,比如子组件重复执行问题,每次渲染都进行高开销的计算
// 子组件 function Sub(props) { console.log("Sub render"); let { number, onClick } = props return ( <button onClick={onClick}>{number}</button> ) } // 父组件 function Test() { let [value, setValue] = useState('') let [number, setNumber] = useState(0) const addClick = () => setNumber(number + 1) return <> <input type="text" value={value} onChange={(e) => setValue(e.target.value)} /> <Sub number={number} onClick={addClick} /> </> } export default Test;
子组件依赖的只有number ,理想情况下只希望number变化时触发子组件重新渲染
但实际是在输入框内的值发生变化,子组件也会重新渲染 如果子组件的逻辑较复杂,就是无意义的大量计算,浪费资源
// 子组件 function Sub(props) { console.log("Sub render"); let { number, onClick } = props return ( <button onClick={onClick}>{number}</button> ) } // 父组件 function Test() { let [value, setValue] = useState('') let [number, setNumber] = useState(0) const addClick = () => setNumber(number + 1); // 使用useMemo记住计算后的值,只有当依赖number变量发生变化,才会重新计算子组件内容 const MemoSub = useMemo( () => <Sub data={number} onClick={addClick} />, [number] // 只有 number 变化才重新计算 MenoSub ) return <> <input type="text" value={value} onChange={(e) => setValue(e.target.value)} /> {MemoSub} </> } export default Test;
useCallback(性能优化)
接收两个参数:回调函数和依赖项数组。回调函数是需要缓存的函数,依赖项数组用于确定何时需要重新创建函数实例。
当依赖项数组中的任何一个值发生变化时,useCallback 将返回一个新的函数实例,否则它将返回之前缓存的函数实例
import { useState, useCallback } from 'react'; function MyComponent() { const [count, setCount] = useState(0); // 使用 useCallback 缓存 handleClick 函数 const handleClick = useCallback(() => { setCount(count + 1); }, [count]); return ( <div> <p>You clicked {count} times</p> {/* 在按钮上使用缓存的 handleClick 函数 */} <button onClick={handleClick}>Click me</button> </div> ); }
在这个例子中,我们使用 useCallback 来缓存回调函数 handleClick, 将其缓存以避免在每次重新渲染组件时创建新的函数实例。
同时,在按钮上使用了缓存的 handleClick 函数,以确保点击按钮时调用的是缓存的函数实例。我们还将 count 添加到依赖项数组中,以确保每当 count 发生变化时,handleClick 都会被重新创建。
useCallback 和 useMomeo 的区别
1.useCallback 和 useMemo 都是用于性能优化的 React 钩子函数,它们都可以避免不必要的重新计算或重新渲染。虽然它们看起来很相似,但它们有几个重要的区别。
2.首先,useCallback 返回一个缓存的回调函数,而 useMemo 返回一个缓存的值。这意味着 useCallback 的主要作用是为一个函数创建缓存,而 useMemo 的主要作用是缓存一个值
3.最后,它们的使用场景也不同。useCallback 适用于优化回调函数,避免不必要的重新渲染,并传递给子组件。而 useMemo 适用于优化计算开销较大的值,如大型数组或对象的计算
useRef
useRef 可以缓存所有数据类型,更新的数据不会随着组件的重新渲染而重置,会一直保持最新状态的内容,
但是保存的数据类型 无法在ui渲染页面上使用,只能作为一个状态进行储存
也可以绑定给一个元素标签获取dom进行操作
function Test() { /* 保存 DOM */ const inputEl = useRef() const onClick = () => { console.log(inputEl); // 对象类型,只有一个 current 属性指向指定DOM inputEl.current.innerHTML = '2asdasd sd阿萨德' } return <div> <div ref={inputEl}></div> <button onClick={onClick}>click me!!!</button> <br /> </div> }
useContext
usecontext React 16.3本中新引入的一个特性,它可以让组件之间共享数据十分方便。它属于 React Context API(上下文API),可以让组件层级之间自由传递数据,而使用Context API可以极大地提高组件之间的可复用性。
使用 useContext以使组件树中的任何组件访问到 cntext值,无论它是何种层级的,而且更方便的是,不需要利用props行传递,而只需要一行代码即可
下面案例是同一组件下多个 子组件的上下文通讯
import React, { createContext, useContext } from 'react'; const ThemeContext = createContext('light') // 父组件 function Test() { return ( <ThemeContext.Provider value="dark"> <Toolbar theme="dark" /> </ThemeContext.Provider> ) } // 子组件 function Toolbar(props) { return ( // 中间的组件再也不必指明往下传递 theme 了。 <div> <Button /> </div> ) } // 子组件中的子组件 function Button() { // 指定 contextType 读取当前的 themecontext。 // React 会往上找到最近的 theme Provider,然后使用它的值。 // 在这个例子中,当前的 theme 值为 “dark”。 const theme = useContext(ThemeContext) return <button>{ theme }</button> }
垮文件使用usecontext 进行通讯
父组件
import React, { useState, createContext } from 'react' import Counter from './Counter' export const countContext = createContext() export default function Example4() { const [count, setCount] = useState(0) return ( <div> <p>你点击了{count}次</p> <button onClick={()=>{setCount(count+1)}}>点击</button> <countContext.Provider value={count}> <Counter /> </countContext.Provider> </div> ) }
子组件
import React, { useContext } from 'react' import { countContext } from './Example4' function Counter() { let count = useContext(countContext) return ( <div> <h2>{count}</h2> </div> ) } export default Counter
这样在多级组件使用就减少使用redux,useContext确实好用,起码跨级传递数据不用那么麻烦了
完结,有不足欢迎补充。文章来源地址https://www.toymoban.com/news/detail-709957.html
到了这里,关于React hooks 大全详情的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!