React-component-class-setState

卷心菜007

已于 2022-04-07 10:26:14 修改

阅读量556

点赞数

分类专栏： React 文章标签： react.js 前端

于 2022-04-06 20:47:36 首次发布

本文链接：https://blog.csdn.net/m0_65912225/article/details/123995692

版权

React 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

官方文档：State & 生命周期 – React

<body>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <div id="app"></div>
    <script type="text/babel">

        // setState
        class App extends React.Component{
            state = {a:0,b:0,c:0}
            handleClick = () => {
                // 1.验证组件实例
                console.log(this);//组件实例

                // 2.直接赋值，不能触发渲染，不能执行render,状态不改变(强制执行可以执行render)
                // this.state.a = 1
                // console.log(this.state.a);//输出：1

                // 3、setState:改变值并触发render
                this.setState({
                    a:1
                })

                // 4、setState:异步的(条件:合成事件里) 触发了render
                // this.setState({
                //     a:1
                // })
                // console.log(this.state.a);

                // 5.多次调用setState
                // setState是异步的
                // 三次setState=>render执行一次=>数据全部修改=>机制：批量更新(react的性能优化)=>批量更新完毕=>render 
                // 所以react批量更新发生在render之前，是react性能优化机制
                // this.setState({a:1})
                // this.setState({b:1})
                // this.setState({c:1})
                // console.log(this.state);
                // 输出：第一步：{a: 0, b: 0, c: 0}
                

                // 6.获取异步的值
                this.setState({a:1})
                this.setState({a:this.state.a=1},()=>{
                    console.log('callback',this.state.a);
                })
                console.log(this.state.a);

                // 7.累加隐患
                this.setState({a:1})
                this.setState({a:this.state.a+1})
                this.setState({a:this.state.a+1})
                // 最后合并
                this.setState({a:1})
                console.log(this.state.a);//输出：0 原因：setState异步原因
                // 数据显示也是1 原因：累加隐患调用serState更新值的时候，有依赖于state数据，出现累加隐患，累加隐患：不依赖于上一次的数据进行下一次数据的计算
                this.setState({a:1})
                this.setState({a:this.state.a+2})
                this.setState({a:this.state.a+3})
                // 只取最后一个执行 输出3 6 9...
                // 最后合并
                this.setState({a:3})

                

                // 7.累加隐患解决
                // setState传函数解决累加隐患
                this.setState({a:1})
                this.setState((preState,props)=>{
                    return {a:preState.a+1}
                })
                this.setState((preState,props)=>{
                    return {a:preState.a+1}
                })
                this.setState((preState,props)=>{
                    return {a:preState.a+1}
                },()=>{
                    console.log('callback',this.state.a);
                })
                // 理解：实际相当于数组
                // [
                // (preState,props)=>{
                // return {a:preState.a+1}
                // },
                // (preState,props)=>{
                // return {a:preState.a+1}
                // },
                // (preState,props)=>{
                // return {a:preState.a+1}
                // }
                // ]

                //setSate参数方式总结：
                // setState({}) 设置值 异步 获取不到值 无法获取setSate设置的值 存在累计隐患
                // setState({},()=>{}) 获取设置完成后的值 没有依赖
                // setState(()={},()=>{}) 能够产生依赖 获取值
            }
            render(){
                console.log('render--');
                return(
                    <div>
                        <h1>
                            {this.state.a}
                        </h1>
                        <h1>
                            {this.state.b}
                        </h1>
                        <h1>
                            {this.state.c}
                        </h1>
                        {/*onClick onChange等：合成事件 对事件进行了包装(事件代理和委托)*/}
                        <button onClick = {this.handleClick}>click</button>
                    </div>
                )
            }
        }


    ReactDOM.render(<App />,document.getElementById('app'))
    </script>
</body>

setState异步，4控制台输出：

setState存在累加隐患，控制台输出：

卷心菜007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React-component-class-setState

<body> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="http...
复制链接

扫一扫