【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