当前位置:Gxlcms > JavaScript > React中state使用详解

React中state使用详解

时间:2021-07-01 10:21:17 帮助过:8人阅读

这次给大家带来React中state使用详解,React中state使用的注意事项有哪些,下面就是实战案例,一起来看一下。

state

state 可以理解成 props,不一样的在于 props 是只读的,而 state 是可读写。当 state 发生改变的时候会重新执行 render 方法去渲染整颗 DOM 树,在渲染的过程中会有 diff 算法去计算哪些 DOM 有更新,从而提升性能。
在使用 state 前要先初始化 getInitialState
更改 state 一定要用 setState
getInitialState 该方法在每次 render 时都会被调用一次。

//es5
var StateComponent = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    change: function(event){
        this.setState({text: event.target.value});
    },
    render: function(){
        return (
            <p>
                <p><input type="text" onChange={this.change}/></p>
                <p>{this.state.text}</p>
            </p>
        )
    }
}) 
//es6
import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
    state = {
        text: ''
    }
    change(event){
        this.setState({text: event.target.value});
    },
    render(){
        return (
            <p>
                <p><input type="text" onChange={this.change}/></p>
                <p>{this.state.text}</p>
            </p>
        )
    }
}

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

react实现选中li高亮步骤详解

JS中的JSON和Math使用案例分析

以上就是React中state使用详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行