組件的狀態

每一個組件都有一個狀態，其保存在this.state中，當狀態值發生變化時，React框架會自動調用render()方法，重新渲染頁面。

其中，要注意兩點：

一： this.state值的設置要在構造參數中完成；

二：要修改this.state的值，需要調用this.setState()完成，不能直接對this.state進行修改；

下面通過一個案例進行演示，這個案例將實現：通過點擊按鈕，不斷的更新this.state，從而反應到頁面中。

import React from 'react';class List extends React.Component{constructor(props){super(props);this.state = {dataList : [1,2,3],maxNum : 3}}render(){return (<div><ul>{this.state.dataList.map((value,index) => {return <li key={index}>{value}</li>})}</ul><button onClick={() => {let maxNum = this.state.maxNum + 1;let newArr = [...this.state.dataList, maxNum];this.setState({dataList : newArr,maxNum : maxNum});}}>點我</button></div>);} }export default List;

?

總結

以上是生活随笔為你收集整理的ReactJS入门之组件状态的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。