React中state使用詳解

這次帶給大家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>
        )
    }
}

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

react實作選取li高亮步驟詳解

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

#

以上是React中state使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！