React（2）—— React组件、组件实例三大属性、事件处理、受控组件与非受控组件、高阶函数(1)

• • 1.1函数式组件
• • • 1.1.1函数式组件特点：

• 1.1.2函数式组件的基本写法：

• 1.1.3【补充】严格模式中的this

• 1.2类式组件

• • • 1.2.1函数式组件特点：

• 1.2.2函数式组件的基本写法：

• 2.组件实例三大属性

• • 2.1 state属性
• • 2.1.1理解

• 2.1.2 案例应用

• • 手动切换板

• 【补充】原生JavaScript绑定事件监听的三种方式

• 点击切换版

• 精简代码（实际开发中这样写）

• 【补充】类中直接写赋值语句

• 2.1.3 state案例总结

• 2.2 props属性

• • 2.2.1理解

• 2.2.2作用

• 2.2.3案例演示

• 2.2.4 扩展属性: 将对象的所有属性通过props传递（批量传递标签属性）

• • 【补充】展开运算符

• 2.2.5 对props中的属性值进行类型限制和必要性限制

• 2.3 refs属性

• • 2.3.1 理解

• 2.3.2 `createRef`创建ref容器

• • 定义

• 使用

• 2.3.3 案例演示

• 2.3.4 注意

• 3.收集表单数据(受控/非受控组件)

• • 3.1理解

• 3.2 应用

• 3.3非受控组件

• 3.4 受控组件

• 4. 高阶函数与函数的柯里化

• • 4.1 高阶函数

• 4.2 函数的柯里化

• 4.3 利用高阶函数与函数柯里化简写3.4的代码

• 4.4 不用柯里化实现

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.React组件的分类

===============================================================================

1.1函数式组件

---

提示：函数式组件和类式组件，顾名思义它们的意思就是在把组件放到函数中或者类中去定义。

1.1.1函数式组件特点：

1. 函数式组件一般用于比较简单的组件定义，类组件用于复杂的组件定义

2. 没有生命周期和state

3. 函数组件中的this是undefined，因为函数式组件中默认开启了严格模式

4. 函数组件是一个纯函数，它接收一个props对象返回一个react元素

5. 不能在函数组件中使用生命周期钩子，原因和不能使用state一样，所有的生命周期钩子都来自于继承的React.Component中。

1.1.2函数式组件的基本写法：

// 1. 创建函数式组件

function MyComponent(){

console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式

return

我是用函数定义的组件（适用于简单组件的定义）

}

// 2. 渲染组件到页面

ReactDOM.render(, document.getElementById(‘root’))

结果为下：

代码解释：

执行了ReactDOM.render(< MyComponent/>…之后，发生了什么？

React解析组件标签，找到了MyComponent组件。

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

1.1.3【补充】严格模式