注：学习此篇内容一定要先把类的基本知识搞懂，可参考我另一篇文章： 三分钟让你搞懂Class类 - 掘金 (juejin.cn)
本文是对网站免费资源的知识总结，如侵联删。
函数式组件
类式组件的定义
废话不多说，直接上例子：
js
<!-- 准备好一个"容器" -->
<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>
//1.创建类式组件
<script type="text/babel">
class MyComponent extends React.Component {
render(){
//render是放在哪里的？------ MyComponent的原型对象上，供实例使用。
//render中的this是谁？------ MyComponent的实例对象 <=> MyComponent组件实例对象。
console.log('render中的this:',this);
return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
}
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
</script>
- 如果你了解Class的相关知识，你就能知道render其实就是MyComponent实例原型对象上的一个方法而已，那么this自然就执行MyComponent组件实例对象
- 渲染组件时，React做了什么：
- React解析组件标签，找到了MyComponent组件。
- 发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
- 将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
组件实例三大核心属性之一：state状态
如果你的组件是有状态（state）的，就是复杂组件，反之，就是简单组件
state就是数据，不管是Vue还是React，都是靠数据驱动视图，只不过底层使用了响应式原理和自动更新视图
因为函数式组件是没有this的，因为函数式组件中采用了严格模式，而严格模式下没有this，就别谈组件实例，更别谈组件实例的核心属性了
只有类式组件有，但是后来react增加了hooks，函数式组件也有了状态
state中的this问题（重要）
那么state在哪里呢？其实React已经给我们封装好了，我们在render中打印this会发现在组件的实例对象中有context、props、refs、state等初始值 
如果我们需要对类的实例化对象进行一些初始化操作，如增加一个属性，修改一个属性的值，需要借助类的构造器 写 this.xxx=xxx即可
案例：页面展示天气炎热或凉爽的文字，当点击文字时，改变文字内容
js
<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>
<script type="text/babel">
//1.创建组件
class Weather extends React.Component{
//构造器调用几次？ ------------ 1次
constructor(props){
super(props)
//初始化状态
this.state = {isHot:false,wind:'微风'}
}
render(){
//读取状态
const {isHot,wind} = this.state
return <h1>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
</body>
到这里，都没什么难度，接下来我们要给这段文字添加一个点击事件，当点击文字的时候，文字发生改变，在做该操作之前，我们先来解决React中的小问题
小细节
我们把代码撰写如下：给文字加一个click事件，按理说这样没问题，但是我们看效果
js
<body>
<script type="text/babel">
//1.创建组件
class Weather extends React.Component{
constructor(props){
super(props)
this.state = {isHot:false,wind:'微风'}
}
render(){
const {isHot,wind} = this.state
return <h1 onClick={demo()}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
function demo(){
console.log('我被点击了');
}
</script>
</body>
这说明你不是把demo函数赋给了点击事件，而是把demo函数运行完的返回值赋给了点击事件，由于demo函数中没有return 任何东西，因此就是undefined，因此不生效，此处小细节需要注意下。 我们只需要这样写，就可以了：
js
return <h1 onClick={demo}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>添加点击事件
this的指向问题
我们加一个changeWeather事件，如下所示：
js
<script type="text/babel">
//1.创建组件
class Weather extends React.Component{
constructor(props){
super(props)
this.state = {isHot:false,wind:'微风'}
}
render(){
const {isHot,wind} = this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
}
changeWeather(){
console.log(this.state.isHot)
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>而当我们这样写完代码，发现竟然报错了，这里说明this是undefined，这是为何呢？
我们在changeWeather中打印this，发现真的是undefined，因为这个changeWeather不是通过组件实例调用的
解决方案1：
其实加一行代码就能解决，我们这么加
解决方案2：
基于解决方案1，我们可得到最终的解决方案2
因此最后精简之后的代码为：
js
<script type="text/babel">
//1.创建组件
class Weather extends React.Component{
//初始化状态
state = {isHot:false,wind:'微风'}
render(){
const {isHot,wind} = this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
}
//自定义方法------------要用赋值语句的形式+箭头函数
changeWeather = ()=>{
const isHot = this.state.isHot
this.setState({isHot:!isHot})
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>state中setState
在上面的案例中，我们不能直接修改isHot的数据，比如：this.state.isHot=!this.state.isHot，这样写了之后，数据虽然发生了变化，但是视图并没有更新，这是因为没有触发React的响应式原理，因此要借助setState来写，即：this.setState({isHot:!isHot})
state总结
核心
state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
难点
组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined，如何解决？
a) 强制绑定this: 通过函数对象的bind()
b) 箭头函数
- 状态数据，不能直接修改或更新