<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>切换天气</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">
// 1、创建组件
class Weather extends React.Component {
// 构造器调用几次？—— 1次
constructor(props) {
console.log('constructor')
super(props)
// 借用构造器初始化 状态
this.state = {
isHot: false,
wind: '微风',
}
// bind 改变 this 的指向并且返回一个新函数
this.changeWeather = this.changeWeather.bind(this) // 解决类中方法局部严格模式导致 this 为 undefined 问题
}
// render调用几次？—— 1 + n 次， 1 是初始化的那次， n 是状态更新的次数
render() {
console.log('render')
// 读取状态
let { isHot, wind } = this.state
console.log(this, this.state)
return (
<h1 onClick={this.changeWeather}>
今天天气很{isHot ? '炎热' : '凉爽'}, {wind}
</h1>
)
}
// changeWeather调用几次？—— 点几次调几次
changeWeather() {
// changeWeather 放在那里？—— Weather 的原型对象，供实例使用
// 由于changeWeather 是作为 onClick 的回调，所以不是通过实例调用的，是直接调用
// 类中的方法 默认开启了局部的严格模式，所以 changeWeather 中的 this 是 undefined
// console.log('点击文字', this) // 为什么this 是 undefined？——类中的方法 默认开启了局部的严格模式，所以 changeWeather 中的 this 是 undefined
// 获取原来的 isHot 的值
let { isHot } = this.state
// 严重注意：状态（State）里面的数据不能直接更改， 要借助一个内置的 API 去更改
// this.state.isHot = !isHot // 这行就是直接更改！这是错误写法
// 严重注意： 状态（state）必须通过 setState 进行更改,且更新是一种合并，不是替换
this.setState({ isHot: !isHot })
console.log(isHot, this)
}
}
// 2、渲染组件到页面
// ReactDOM.render(组件，容器)
ReactDOM.render(<Weather />, document.getElementById('test'))
</script>
</body>
</html>
2、React面向组件编程.rar （17个子文件） 
2、React面向组件编程 01_点击切换天气 state 
02_state 的简写.html 2KB 01_点击切换天气.html 3KB js 
react-is.production.min.js 2KB prop-types.js 47KB react-dom.development.js 751KB babel.min.js 773KB react.development.js 99KB 02_props 04_props的简写方式2.html 2KB 03_props的简写方式.html 2KB 05_函数式组件使用props.html 2KB 02_props进行限制.html 2KB 01_props基本使用.html 2KB 03_refs与事件处理 01_refs.html 2KB 02_回调函数形式的ref.html 2KB 05_事件处理.html 2KB 03_回调函数的ref 回调次数.html 2KB 04_createRef.html 2KB资源评论
