<!-- 准备好一个容器 --> <div id="test"></div> <!-- 引入核心库 React对象 --> <script src="../js/react.development.js"></script> <!-- 引入react-dom, 用于支持react操作dom --> <script src="../js/react-dom.development.js"></script> <!-- 引入babel, 用于将jxs转为js --> <script src="../js/babel.min.js"></script> <script type="text/babel"> //1. 创建类式组件 class Weather extends React.Component{ //初始化状态 state = {isHot:true} render() { const {isHot} = this.state return <h1 id="title" onClick={this.changeWeather}>今天天气很{isHot ? "炎热":"凉爽"}</h1> } //自定义方法: 要用赋值语句的形式 + 箭头函数 changeWeather = ()=>{ console.log(this); //箭头函数没有自己的this, 它会找外侧函数的this做为箭头函数自己的this let isHost = this.state.isHot; //注意: 状态(state)不可以直接更改(React不认), 要借助一个内置的API setState 如下: this.setState({isHot:!isHost}) } } ReactDOM.render(<Weather/>,document.getElementById("test")) </script>
State应用总结:
1> state 是组件对象最重要的属性,值是对象(可以包含多个key-value的组合)
2> 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
注意:
1. 组件中render方法中的this为组件实例对象
2. 组件中自定义的方法中 this 为undefined?如何解决?
a. 强制绑定 this, 通过函数对象的bind();
b. 赋值 + 箭头函数
3. 状态数据: 不能直接修改或者更新,通过setState方法
当更新State属性值时,render会再次渲染
以下为非简化用法,需要在类中的constructor方法中为每一个方法重新绑定this(类中的方法存储在原型对象上,事件绑定是这个方法,里面的this为undefined)
//1. 创建类式组件 class Weather extends React.Component{ constructor(props){ super(props); this.state = {isHot:true} this.changeWeather = this.changeWeather.bind(this); //改变this.changeWeather函数的this为当前实例对象 } //render调用几次? 1 + n 次 1是初始化的那次,n是每次更新状态时的值 render() { const {isHot} = this.state return <h1 id="title" onClick={this.changeWeather}>今天天气很{isHot ? "炎热":"凉爽"}</h1> //注意:{clickTitle} -- 渲染时返回一个方法 不是 {clickTitle() -- 渲染时会执行函数, 返回undefined} //onClick : 不是onclick } changeWeather(){ //changeWeather放在哪里?---Weather的原型对象上, 供实例使用 //由于changerWeather是作为onClick的回调(通过this找到,非直接调用); 所以不是通过实例调用的, 是直接调用 //类中的方法默认开启了局部的严格模式, 所以changeWeather中的this为undefined; //console.log(this); //undefined // console.log("标题被单击了"); let isHost = this.state.isHot; // this.state.isHot = !this.state.isHot; //直接更改 //console.log(this.state.isHot); //严重注意: 状态(state)不可以直接更改(React不认), 要借助一个内置的API setState 如下: this.setState({isHot:!isHost}) } } ReactDOM.render(<Weather/>,document.getElementById("test"))