reactJS -- 3 State 工作原理

2019独角兽企业重金招聘Python工程师标准>>>

一. 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

 

转载于:https://my.oschina.net/u/2991733/blog/1138666