扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >react中(含hooks)同步获取state值的方式
  • 919

0
分享到

react中(含hooks)同步获取state值的方式

react hooksreact中同步react获取state值 2022-11-13 14:11:46 919人浏览 安东尼
摘要

目录React(含hooks)同步获取state值环境代码示例异步写成同步的方法react hooks常用方法1.useState2.useEffect3.useContext上下文

react(含hooks)同步获取state值

环境

"dependencies": {
    "babel-plugin-transfORM-decorators-legacy": "^1.3.5",
    "customize-cra": "^1.0.0",
    "rc-form": "^2.4.11",
    "react": "^17.0.1",
    "react-app-rewired": "^2.1.8",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.1",
    "redux": "^4.0.5"
  },

代码示例

hooks

import {useState} from "react";
export default function Pre04SetStateSync() {
    const [counter, setCounter] = useState(0)
    const add = () => {
        setCounter(counter + 1)
        console.log({counter})
    }
    return <>
        <h3>同步SetState</h3>
        <p>请观察控制台</p>
        <button onClick={add}>counter: {counter}</button>
    </>
}

class 

export default class Pre04SetStateSync extends React.Component{
    state = {
        counter:0
    }
    add = () => {
        this.setState({counter:this.state.counter + 1})
        console.log('~~this.state.counter',this.state.counter)
    }
    render() {
        return <>
            <h3>同步SetState</h3>
            <p>请观察控制台</p>
            <button onClick={this.add}>counter: {this.state.counter}</button>
        </>
    }
}

hooks结构中的setCounter(xxx)相当于class组件写法中setState({counter: xxx})

可以对比控制台看到，这样直接setCounter(setState)后立即输出的counter的是上一次的值，而按钮上显示正确，说明本次更新是异步的(react这样设计是为了批量更新而提高性能)，打印时counter还没来得及改变。如果需要set完后立即取到counter的最新值，可以按如下方法实现同步的效果。

异步写成同步的方法

1. 写在setTimeout中

注意，只适用于class组件

add = () => {
    setTimeout(()=>{
        this.setState({counter:this.state.counter + 1})
        console.log('~~this.state.counter',this.state.counter)
    },0)
}

2. 合成事件使用原生事件替代

注意，只适用于class组件

// 原生事件
export default class Pre04SetStateSync extends React.Component {
    state = {
        counter: 0
    }
    componentDidMount() {
        document.querySelector('#btn').addEventListener('click', this.add)
    }
    add = () => {
        this.setState({counter: this.state.counter + 1})
        console.log('~~this.state.counter', this.state.counter)
    }
    render() {
        return <>
            <h3>同步SetState</h3>
            <p>请观察控制台</p>
            <button id='btn'>counter: {this.state.counter}</button>
        </>
    }
}

3. 写入setState的回调函数中

注意，只适用于class组件

export default class Pre04SetStateSync extends React.Component {
    state = {
        counter: 0
    }
    add = () => {
        this.setState({counter: this.state.counter + 1}, ()=>{
            console.log('~~this.state.counter', this.state.counter)
        })
    }
    render() {
        return <>
            <h3>同步SetState</h3>
            <p>请观察控制台</p>
            <button onClick={this.add}>counter: {this.state.counter}</button>
        </>
    }
}

4. 连续setState的问题

注意，class组件和hooks都可以

如果将add改为先加1再加2，会发现代码只执行了最后一个加2，加1被忽略了，如：

const add = () => {
    setCounter(counter + 1)
    setCounter(counter + 2)
}

解决方法是将setState的参数写成函数形式

const add = () => {
    setCounter(counter => counter + 1)
    setCounter(counter => counter + 2)
}

5. 使用副作用useEffect

注意，只适用于hooks

export default function Pre04SetStateSync() {
    const [counter, setCounter] = useState(0)
    const add = () => {
        setCounter(counter + 1)
    }
    useEffect(() => {
        console.log({counter})
    }, [counter])
    
    return <>
        <h3>同步SetState</h3>
        <p>请观察控制台</p>
        <button onClick={add}>counter: {counter}</button>
    </>
}

react hooks常用方法

1.useState

function Example01(){
    const [ count, setCount ] = useState(0)  //声明
    return(
        <div>
            <p>{count}</p>  //读取
            <button onClick={()=>setCount(count+1)}>计数</button> // 使用（修改）
        </div>
    )
}

2.useEffect

1.React首次渲染和之后的每次渲染都会调用一遍useEffect函数，而之前我们要用两个生命周期函数分别表示首次渲染(componentDidMonut)和更新导致的重新渲染(componentDidUpdate)

2.useEffect中定义的函数的执行不会阻碍浏览器更新视图，也就是说这些函数时异步执行的，而componentDidMonut和componentDidUpdate中的代码都是同步执行的。

注意：

如果useEffect后面没有依赖：

这种时候每次每次页面更新都会执行

useEffect(()=>{
    console.log('执行');
})

如果后面为空

页面初始的时候执行一次

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

如果后面有值且不为空

只有当count改变时才会被触发

useEffect(()=>{
    console.log('执行');
},[count])

使用useEffect解绑，组件卸载的时候，比如需要清除计时器等：

但是当传空数组[]时，就是当组件将被销毁时才进行解绑，这也就实现了componentWillUnmount的生命周期函数。

function Index() {
    useEffect(()=>{
        console.log('useEffect=>Index')
        return ()=>{
            console.log('Index页面离开')
        }
    },[])
    return <h2>测试解绑</h2>;
}

3.useContext上下文传值

1.父组件：

const CountContext = createContext()  //引入
function Example01(){
    const [ count, setCount ] = useState(0)
    return(
        <div>
            <p>{count}</p>
            <button onClick={()=>setCount(count+1)}>计数</button>
            <CountContext.Provider value={count}>  //使用包裹子组件传递值
                <ChildContent/>
            </CountContext.Provider>      
        </div>
    )
}

2.子组件：

function ChildContent(){
     const context = useContext(CountContext) 
     return(
         <p>{context}</p>
     )
}

4.useReducer

它也是React hooks提供的函数，可以增强我们的Reducer，实现类似Redux的功能。

import React, { useReducer  } from 'react'
function Example5(){
    const [ count, dispatch ] = useReducer((state,action)=>{  
              switch(action){   //通过判断对应的action,去执行对应的方法
            case 'add':
                return state+1
            case 'sub':
                return state-1
            default:
                return state
        }
    },1)
    return(
        <div>
            <p>{count}</p>
            <button onClick={()=>dispatch('add')}>add</button>  //通过dispatch，传递对应的action，调用对应的方法
            <button onClick={()=>dispatch('sub')}>sub</button>
        </div>
    )
}
export default Example5

5.useMemo

useMemo主要用来解决使用React hooks产生的无用渲染的性能问题。

只要使用useMemo，然后给她传递第二个参数，参数匹配成功，才会执行。

1.在父组件里面，传递对应需要的参数

import React , {useState,useMemo} from 'react';
function Example7(){
    const [one , setOne] = useState('第一个的状态')
    const [two , setTwo] = useState('志玲待客状态')
    return (
        <>
            <button onClick={()=>{setOne(new Date().getTime())}}>第一个</button>
            <button onClick={()=>{setTwo(new Date().getTime())}}>第二个</button>
            <ChildComponent name={one}>{two}</ChildComponent>
        </>
    )
}

2.父组件调用子组件

function ChildComponent({name,children}){
    function changeXiaohong(name){
        return name
    }
 const actionXiaohong = useMemo(()=>changeXiaohong(name),[name])
    return (
        <>
            <div>{actionXiaohong}</div>
            <div>{children}</div>
        </>
    )
}

6.useRef

用useRef获取React jsX中的DOM元素，获取后你就可以控制DOM的任何东西了。但是一般不建议这样来作，React界面的变化可以通过状态来控制

import React, { useRef } from 'react'
function Example8(){
    const inputRef  = useRef(null)
    const onButtonClick=()=>{
        inputRef.current.value='THIS IS INPUT'
        console.log(inputRef);
    }
    return(
        <div>
            <input type="text" ref={inputRef}/>
            <button onClick = {onButtonClick}>显示</button>
        </div>
    )
}
export default Example8

保存普通变量

import React, { useRef,useState } from 'react'
function Example8(){
    const inputRef  = useRef(null)
    const onButtonClick=()=>{
        inputRef.current.value='THIS IS INPUT'
        console.log(inputRef);
    }
     const [state, setstate] = useState('inputValue')  //声明一个变量
    return(
        <div>
            <input type="text" ref={inputRef}/>
            <button onClick = {onButtonClick}>显示</button>
            <input value={state} type="text" onChange={(e)=>setstate(e.target.value)}/>  //绑定对应的值以及绑定onChange事件
        </div>
    )
}
export default Example8

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。

--结束END--

本文标题: react中(含hooks)同步获取state值的方式

本文链接: https://lsjlt.com/news/172057.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • react中(含hooks)同步获取state值的方式
    目录react(含hooks)同步获取state值环境代码示例异步写成同步的方法react hooks常用方法1.useState2.useEffect3.useContext上下文...
    99+
    2022-11-13
    react hooks react中同步 react获取state值
  • react如何获取state的值并更新使用
    目录react获取state值并更新使用在视图层处理在model层处理react中state基本使用有状态组件和无状态组件state的基本使用setState修改状态从JSX中抽离事...
    99+
    2022-11-13
    react获取state的值 react state更新使用 react 更新state的值
  • vuex获取state对象中值的所有方法小结(module中的state)
    目录vuex获取state对象中的值直接从store实例取值 使用mapState取值的多种方法使用module中的state vuex调用state数据第一种第...
    99+
    2024-04-02
  • react hooks组件间的传值方式是什么
    这篇文章给大家介绍react hooks组件间的传值方式是什么，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。父传子通过props传值，使用useState来控制state的状态值父组件 Father.tsx里：子组件 ...
    99+
    2023-06-25
  • Vuex中如何getters动态获取state的值
    目录Vuex getters动态获取state的值案例说明Vuex state值更改但是getters未更新实现效果Vuex getters动态获取state的值 在做项目时，get...
    99+
    2024-04-02
  • React组件的创建与state同步异步方法是什么
    这篇文章主要介绍“React组件的创建与state同步异步方法是什么”，在日常操作中，相信很多人在React组件的创建与state同步异步方法是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”React组件...
    99+
    2023-07-05
  • 详解react中的state的简写方式
    前言 什么是state 我们都说React是一个状态机，体现是什么地方呢，就是体现在state上，通过与用户的交互，实现不同的状态，然后去渲染UI,这样就让用户的数据和界面保持一致...
    99+
    2024-04-02
  • 详解react hooks组件间的传值方式(使用ts)
    目录父传子子传父跨级组件(父传后代)父传子 通过props传值，使用useState来控制state的状态值 父组件 Father.tsx里： 子组件 Child.tsx里： ...
    99+
    2024-04-02
  • 【MyBatis】获取参数值的方式
     🍓个人主页：个人主页 🍒系列专栏：SSM框架 目录 1.单个字面量类型的参数  2.多个字面量类型的参数 3.map集合类型的参数 4.实体类类型的参数 5.使用@Param标识参数 ...
    99+
    2023-08-31
    mybatis java spring mysql spring boot
  • 详解React获取DOM和获取组件实例的方式
    目录React获取DOM的方式ref获取DOM元素ref获取组件实例React获取DOM的方式 ref获取DOM元素 在React的开发模式中，通常情况下不需要、也不建议直接操作DO...
    99+
    2024-04-02
  • SpringBoot 属性配置中获取值的方式
    目录SpringBoot 属性配置中获取值首先，定义一个实体类去写属性测试和生产区分SpringBoot 获取值和配置文件1、@ConfigurationProperties(pre...
    99+
    2024-04-02
  • SpringMVC中重定向model值的获取方式
    目录SpringMVC重定向model值的获取1、步骤一：在控制器中编写2、编写对应跳转3、测试：在浏览器访问自己项目下的对应控制器4、然后浏览器跳转SpringMVC中model的...
    99+
    2024-04-02
  • Java中HashMap获取值的方式有哪些
    这篇文章主要介绍了Java中HashMap获取值的方式有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Java中HashMap获取值的方式有哪些文章都会有所收获，下面我们一起来看看吧。Java HashMa...
    99+
    2023-07-05
  • react获取input输入框的值的方法示例
    react 获取input 输入框的值的多种方式 第一种方式 非受控组件获取 第二种方式 受控组件获取 非受控组件获取 ref import React , {Co...
    99+
    2024-04-02
  • jquery获取值的方式有哪些
    jQuery有多种方式可以获取值，以下是一些常用的方法：1. .val()：用于获取表单元素的值，如输入框、下拉框和单选框等。例：$...
    99+
    2023-08-11
    jquery
  • Java中HashMap获取值的几种方式汇总
    目录Java HashMap获取值的方式Java HashMap基本用法总结Java HashMap获取值的方式 1、通过keySet()方法获取key的集合，因为在HashMap中...
    99+
    2023-03-22
    Java HashMap Java HashMap获取值 HashMap获取值的方式
  • vue获取或者改变vuex中的值方式
    目录vue获取或改变vuex的值store–>index.js在页面中使用或者修改vuex中的值监听vuex值变化实时改变问题如图思路vue获取或改变vuex的值 ...
    99+
    2024-04-02
  • 浅谈Mybatis获取参数值的方式
    目录一、 Mybatis获取参数值的各种情况1.mapper接口方法的参数为单个字面量的类型2.mapper接口方法的参数有多个3.手动把参数放在map集合中4.mapper接口方法...
    99+
    2024-04-02
  • jquery获取input值的方式有哪些
    这篇文章主要介绍“jquery获取input值的方式有哪些”，在日常操作中，相信很多人在jquery获取input值的方式有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”...
    99+
    2024-04-02
  • vue中异步数据获取方式(确保数据被获取)
    目录vue中异步数据获取1、获取异步数据，通过async/await限制 2、将一个方法的返回值vue处理数据（同步，异步）问题简单记录情况介绍最终解决方法：new Pro...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作