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