【React 框架】React面向组件编程：函数式组件 / 类式组件 ( state / props / refs / 事件处理 )

学习视频：尚硅谷React技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）_哔哩哔哩_bilibili

---

一、函数式组件

    <script type="text/babel">
        // 1. 创建函数式组件
        function Demo() {
            // 以下的this是undefined，因为babel编译后开启了严格模式
            console.log(this);
            return <h2>我是用函数定义的组件！</h2>
        }

        // 2. 渲染组件到页面
        // 注意事项：
        // （1）组件名首字母一定要大写，不然会识别为html标签导致报错。
        // （2）标签名一定要闭合。<Demo />或者<Demo></Demo>。
        ReactDOM.render(<Demo />, document.querySelector('.box'))
    </script>

注意点：

        （1）函数名的首字母一定要大写。【这个涉及到上一节的 jsx 语法规则，若首字母是小写字母，则会被识别为对应的html标签；若首字母是大写字母，才会去找对应的组件。】

        （2）标签名一定要闭合。

 执行ReactDOM.render(...)之后，发生了什么？

        （1）React 解析组件标签，找到 Demo 组件。

        （2）发现组件是使用函数定义的，随后调用该函数，将返回的虚拟 DOM 转为真实 DOM 呈现到页面中。

二、类式组件

1、语法

	<script type="text/babel">
		//1.创建类式组件
		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>

注意点：

        （1）类式组件必须继承 React.Component 。

        （2）一定要理解清楚代码注释中的两大问题：

                ① 类中的方法是放在哪儿的？

                ② 方法中的this是什么？

执行了ReactDOM.render(<MyComponent/>.......)之后，发生了什么？
        （1）React 解析组件标签，找到了 MyComponent 组件。
        （2）发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。【所以 render 中的 this 是组件实例对象！】
        （3）将 render 返回的虚拟 DOM 转为真实 DOM，随后呈现在页面中。

2、三大属性

2.1 state

2.1.1 理解

• state 是组件对象最重要的属性，值是对象 ( 可以包含多个 key-value 的组合 ) 。
• 组件被称为"状态机"，通过更新组件的 state 来更新对应的页面显示 ( 重新渲染组件 ) 。

2.1.2 通过实际案例来理解

        实现效果：在控制台通过点击实现“炎热”和“凉爽”的交替变化。

        这部分可以参考学习视频，老师是一步步递进的，讲的很不错。

• 未简化的 code ：

    <script type="text/babel">
        // 1. 创建一个类式组件
        class Demo extends React.Component {
            // 定义构造器
            constructor(props) {
                // 如果有继承，一定要写super，否则会报错
                super(props)
                // state是一个对象, 初始化对象
                this.state = { isHot: false };
                // 右边：这里的this是Demo的实例对象，因此调用this.changeWeather方法，并且更改方法中的this为当前的实例对象。
                // 左边：赋值语句，将更改this后的方法赋值给左边，其实是创造了一个新的方法。
                this.changeWeather = this.changeWeather.bind(this);
            }
            // render是必写的，而且要有返回值。定义在类的原型对象上，供实例使用。
            render() {
                // console.log(this);
                /