持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情
组件实例的三大核心属性之一 - state
state
在上一篇文章中提到了 【简单组件】 以及 【复杂组件】，在官方文档中，简单组件是 React 组件使用一个名为 render() 的方法，接收输入的数据并返回需要展示的内容。在示例中这种类似 XML 的写法被称为 JSX。被传入的数据可在组件中通过 this.props 在 render() 访问。
而复杂组件，则是有状态的，内部需要维护 state 属性来控制访问，当组件的状态数据改变时，组件会再次调用 render() 方法重新渲染对应的标记。
注意事项：
- 组件中
render方法中的this为组件实例对象； - 组件自定义方法中的
this为undefined，解决方法： 1）强制绑定this，通过函数对象的bind()； 2）箭头函数 - 状态数据，不能直接修改或更新
案例
通过点击事件控制state改变，使得组件重新渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 测试容器 -->
<div id="test"></div>
<!-- 加载 React 核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 加载 React DOM 用于支持 React 操作 DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 加载 babel 用于将 jsx 转为 js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 设置类型为babel -->
<script type="text/babel">
// 创建组件
class Weather extends React.Component{
// 初始化状态
state = {isHot: false}
constructor(props){
super(props)
// 强制绑定 this
// this.changeWeather = this.changeWeather.bind(this)
}
render(){
console.log('Weather.render(): ', this)
return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h1>
}
// 使用箭头函数简化
changeWeather = () => {
const isHot = this.state.isHot
this.setState({isHot: !isHot})
}
}
// 将组件渲染到页面
ReactDOM.render(<Weather/>, document.getElementById('test'))
</script>
</body>
</html>
