reactJS -- 3 State 工做原理

一. State  做用域

state 的做用域只在當前的 class

當state

import React from 'react';
import ReactDOM from 'react-dom';
//export 暴露
export default class BodyIndex extends React.Component{
  constructor(){   //類的構造函數
    super(); // 調用基類的全部的初始化方法
    this.state = {
      userName :"parray",
      age:10
    }; //初始化賦值
  }
  render(){   //解析類的輸出

    setTimeout(()=>{
      //更改state的語句
      this.setState({
        userName : "userName changed",
        age : 20
      })

    },4000);  //4s  刷新
    return (
      <div>
        <h2>頁面主體內容</h2>
        <p>{this.state.userName} {this.state.age}</p>
      </div>
    )
  }
}

二. state的使用

迄今爲止,基於它本身的props，每一個組件都渲染了本身一次。props 是不可變的：它們從父級傳來並被父級「擁有」。爲了實現交互，咱們給組件引進了可變的 state。this.state 是組件私有的，能夠經過調用 this.setState() 改變它。每當state更新，組件就從新渲染本身。

render() 方法被聲明爲一個帶有 this.props 和 this.state 的函數。框架保證了 UI 老是與輸入一致。

1.state的做用域只是當前的class,不會污染其餘的class
2.state改變後,元素自動更新，但不會
3.傳入參數形式多樣，上例傳入json

1.更改state

this.setState({
        userName : "userName changed",
        age : 20
      })

2.當元素修改時顯示高亮

Rendering