【React的特性事件表单的使用函数组件】
目录
- 一、React的特性
- 二、React的事件
- 三、表单的使用
- 四、函数组件
一、React的特性
1、ref：使用createRef创建ref,把该ref和节点进行绑定
2、key：列表在输出元素时，每个列表项需要有key属性。主要作用在构建虚拟的DOM时，进行新旧的区分
3、children：用于传递组件内部要渲染的内容。通过props.children接收父组件传过来的要渲染的内容
4、dangerouslySetInnerHTML：在React元素中直接添加InnerHTML
二、React的事件
1、react使用的是合成事件而非原生的DOM事件。在react中给元素添加事件类似于行间事件
(1)行间事件：事件名称纯小写,事件接收的是字符串
<button οnclick=“事件处理函数名”>提交</button>
(2)React类似于行间事件：事件名称采用驼峰命名法,可以通过JSX插值表达式放入函数
<button onClick={ this.clickHandler }>点击</button>
2、在React中添加事件时要注意的问题
(1)事件处理函数是没有绑定this：即在事件处理函数中this为undefined
(2)若在事件处理函数中要使用this，可以将该事件处理函数变成箭头函数，或者通过bind函数绑定this
(3)获取事件源：
clickHandler=(e)=>{
console.log(e.target) //输出事件源
}
(4)在React中阻止默认事件不能使用return false，必须使用event.preventDefault()
e.preventDefault()
三、表单的使用
1、将组件的状态(state)与表单的状态进行绑定：当组件的state发生改变时修改表单的状态,或者表单的状态被改变时通过setState修改组件的状态,这样就形成了组件对表单控件的控制—受控组件
(1)输入类型的表单控件,控制的是value属性
(2)单选框和复选框控制的是checked属性
2、受控组件：实现组件的状态和表单控件状态的同步(间接实现了双向绑定)
3、非受控组件：组件的状态和表单控件状态不同步(只是表单控件的初值和组件的state一致)。无需添加onChange事件,对于输入型表单控件使用defaultValue，对于复选框和单选框使用defaultChecked.
四、函数组件
函数组件 ：一个函数就是一个组件(简易组件)。函数的第一个参数是父级组件传过来的props,返回值是该组件 要输出的视图。
1、在react16.7之前函数组件中不能定义state，也没有生命周期。一般作为纯展示组件使用。又称为无状态组件
2、类组件的缺点：
(1)关于this的绑定问题
(2)很多业务逻辑写在生命周期函数componentDidMount，这样是组件变得复杂并难以维护
3、React Hooks：React16.8开始使用。本质是一个特殊的函数，提供很多个内置的Hook,来帮助开发者实现很多只能在类组件中使用的功能。
(1)useState：通过该Hook，开发者可以在函数组件中使用state.
语法：const [state,setState] = useState(initialState)
该方法的第一个参数’initialState’：是state的初始值，该方法返回的是一个数组
该数组的第一个元素(索引为0的元素)是state的具体值,该数组的第二个元素(索引为0的元素)是一个方法,用来更新state值,然后引起视图的更新
注意的问题：
a、useState的返回setState方法是同类组件的setState,是一个异步方法，需要组件更新后state的值才能变成新值
b、useState返回的setState方法不能像类组件中的setState方法来更改多个属性的值
c、在函数组件中可以使用useState创建多个state