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
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
查看更多关于react中(含hooks)同步获取state值的方式的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did122457