React-class——React表单与事件（受控组件与非受控组件、事件类型、事件对象、事件绑定）、React组件生命周期、面试

目录

一、React表单与事件

1、React表单组件

（1）受控组件与非受控组件——笔试题

（2）更多受控组件

2、React事件

（1）事件类型

（2）事件对象

（3）事件绑定——this为unde

二、React组件生命周期

 1、组件的生命周期

 2、生命周期钩子详解

- **componentWillMount** ：

- **componentDidMount** :

- **componentWillReceiveProps** :

- **shouldComponentUpdate** :

- **componentWillUpdate**:

render函数 在这中间执行

- **componentDidUpdate** :

- **componentWillUnmount**:

 3、生命周期钩子——网络请求

---

一、React表单与事件

1、React表单组件

在HTML中，表单元素与其他元素最大的不同是它自带值或数据

而且，只要是有表单出现的地方，就会有用户输入，表单事件触发，就会涉及的数据处理。

在我们用React开发应用时，为了更好地管理应用中的数据，响应用户的输入，编写组件的时候呢，我们就会运用到**受控组件与非受控组件**这两个概念。

React推荐我们在绝大多数情况下都使用受控组件。这样可以保证表单的数据在组件的state管理之下，而不是各自独立保有各自的数据。

（1）受控组件与非受控组件——笔试题

没有v-model，需要自己去实现

**受控组件**简单来说就是它的值由React进行管理，

而**非受控组件**的值则由原生DOM进行管理。

- 受控组件：==>双向

一般涉及到表单元素时我们才会使用这种分类方法。

受控组件的值由props或state传入给受控组件（表单的输入框），用户在元素上交互或输入内容会引起应用state的改变。

在state改变之后重新渲染组件，我们才能在页面中看到元素中值的变化，

假如组件没有绑定事件处理函数改变state，用户的输入是不会起到任何效果的，这也就是“受控”的含义所在。

- 非受控组件：==>单向

类似于传统的DOM表单控件，用户输入不会直接引起应用state的变化，我们也不会直接为非受控组件传入值。

 想要获取非受控组件，我们需要使用一个特殊的ref属性，同样也可以使用defaultValue属性来为其指定一次性的默认值。

示例如下：

import React from "react"
class App extends React.Component {
    constructor(arg) {
        super(arg)
        this.state = {}
        this.handleChange = (e) => {
            this.setState({ value: e.target.value });
            // e.target.value就是输入的值
        }
    }
    render() {
        return (
            

                {/* 1、受控组件 */}
                

                {/* 2、非受控组件 */}
                
                {/* 如果上没有onChange事件，输入框不能输入，value会一直是this.state.value */}
                
            
        )
    }
}
export default App

（2）更多受控组件

在组件中声明表单元素（input_type/checked   textarea  select ……）时，一般都要为表单元素传入应用状态中的值，我们需要根据表单元素中用户的输入，对应用数据进行相应的操作和改变。

1、radio：

class MyApp extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			gender: ''
		};
        this.handleGender = this.handleGender.bind(this);
	}
    handleGender(event) {
		this.setState({gender: event.target.value});
	}

	render() {
		return (
			

                
input_checked 受控组件
                男

                女

				
{this.state.gender}
                
			
		);
	}
}

ReactDOM.render(
	,
	document.getElementById('root')
);

2、mycheck:

import React, { Component } from 'react'
export default class Mycheck extends Component {
    constructor(){
        super()
        this.state={
            chengdu:true
        }
        this.chengduchange=(e)=>{
           console.log(e.target.checked)
           this.state.chengdu=e.target.checked
           this.setState(this.state)
        }
    }
  render() {
    return (
      

        
        
        
        
      
    )
  }
}

3、mydata

import React, { Component } from 'react&#