// setState 修改状态 如果是直接修改页面不会改变 使用 setState 修改数据 才会驱动视图的改变 // setState 的原理:修改玩状态之后会调用 render 函数 import ReactDom from "react-dom" import { Component } from "react" class App extends Component { // 自增函数 addFn () { console.log(123) // 不要直接修改 state 的状态 是无效的 this.state.a = 12 console.log(this.state.a) this.setState({ count: this.state.count + 1 }) } state = { count: 10, a: 1, } render () { return (<div> <h1>计数器:{this.state.count}</h1> { // bind 绑定当前的this 然后返回新的函数 // 或者使用箭头函数 因为箭头函数本身没有this 使用父级的this指向 } <button onClick={this.addFn.bind(this)}>加一</button> </div >) } } // 把租价渲染到页面 ReactDom.render(<App />, document.querySelector("#root"))
直接修改state的值,页面并不会自动更新UI ;
标签:count,07,render,react,修改,state,setState From: https://www.cnblogs.com/zhulongxu/p/17364581.html