React面向组件编程（定义组件，组件三大核心属性，组件事件处理、组件收集表单数据、高阶函数和函数的柯里化）

目录

一、React中定义组件

1、函数式组件

2、类式组件

二、组件三大核心属性

1、组件三大核心属性1: State(状态)

2、组件三大核心属性2: props

3、组件三大核心属性3: ref

 三、组件事件处理

1、事件处理

 四、组件收集表单数据

1、受控组件

2、非受控组件

 五、高阶函数和函数的柯里化

1、高阶函数柯里化

2、不用柯里化实现

---

一、React中定义组件

1、函数式组件

（1）实质：一个 React 应用就是构建在 React 组件之上的。

（2）函数组件：该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “​props​”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

（3）代码展示如下

<!-- 准备好一个“容器” -->
	<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.创建函数式组件
		function MyComponent(){
			console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
			return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
	</script>

（4）注意：

    1.组件名必须首字母大写

    2.虚拟DOM元素只能有一个根元素

    3.虚拟DOM元素必须有结束标签

    4.函数名就是组件名

2、类式组件

（1）含义：

ES6 的 class 来定义组件，通过继承React.Component。解析流程如下：