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

"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"   },

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

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 <>             
同步SetState
             
请观察控制台
             counter: {this.state.counter}              } }

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

// 原生事件 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 <>             
同步SetState
             
请观察控制台
             counter: {this.state.counter}              } }

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 <>             
同步SetState
             
请观察控制台
             counter: {this.state.counter}              } }

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

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

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

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

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

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

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

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

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

function ChildContent(){      const context = useContext(CountContext)       return(          
{context}
      ) }

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(         
             
{count}
             dispatch('add')}>add  //通过dispatch，传递对应的action，调用对应的方法             dispatch('sub')}>sub         
     ) } export default Example5

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

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

import React, { useRef } from 'react' function Example8(){     const inputRef  = useRef(null)     const onButtonClick=()=>{         inputRef.current.value='THIS IS INPUT'         console.log(inputRef);     }     return(         
                          显示         
     ) } 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(         
                          显示             提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                

                

                

                                            
上一篇：element-plus的自动导入和按需导入方式详解_vue.js_
                                                                
下一篇：React在组件中如何监听redux中state状态的改变_React_