React【组件生命周期 、组件生命周期_挂载、 组件生命周期_更新 、组件生命周期_卸载、表单_受控组件、表单_受控组件处理多个输入】(三)
文章目录
组件生命周期
组件生命周期_挂载
组件生命周期_更新
组件生命周期_卸载
表单_受控组件
表单_受控组件处理多个输入
组件生命周期
每个组件都有自己的生命周期，从“生”到”死“。
在这个过程当中，它会有不同的状态，针对不同的状态，都有对应的一些钩子函数，我们可以借助这些钩子函数做这样的事情：针对组件的某个生命状态去执行某些代码。
生命周期关键节点
挂载时： constructor 、 static getDerivedStateFromProps 、 render() 、 componentDidMount()
更新时： static getDerivedStateFromProps 、 shouldComponentUpdate 、 render() 、
getSnapshotBeforeUpdate 、 componentDidUpdate
卸载时： componentWillUnmount
组件生命周期图谱
组件生命周期_挂载
挂载阶段指的是组件被初始化到第一次渲染到页面上这个过程。
挂载阶段的钩子函数：
1、constructor ：构造函数，组件被初始化时调用，在生命周期中只会被调用一次。
2、static getDerivedStateFromProps ：是组件类的静态函数， 组件 props 或者 state 初始化或者变化时调用，最终可以返回一个新的state对象，使用率低。
3、render ：定义并返回组件的界面（react元素）。
4、componentDidMount ： 生成了真实DOM并被渲染到页面之后调用，在生命周期中只会被调用一次。
import React, { Component } from 'react'
export default class LifeCycle extends
Component {
constructor(props) {
console.log('constructor')
super(props);
// 初始化 state状态
this.state = {
text: "初始值"
}
}
// 使用率低：它应返回一个对象来更新 state，如果返回 null 则state不变
// getDerivedStateFromProps 在组件的state或者props初始化或者发生变化时调用
static getDerivedStateFromProps(props,state) {
console.log('getDerivedStateFromProps')
return {
text: props.text
}
}
// 返回UI
render() {
console.log('render')
return (
组件生命周期
{this.state.text}
)
}
// 组件已经渲染完成
// 这个时候组件对应的DOM已经插入到DOM文档当中了
componentDidMount() {
console.log("componentDidMount");
}
}组件生命周期_更新
更新阶段指的是当影响组件的数据状态发生变更时（ props ， state 发生变更）,重新更新渲染组件页面的过程。
更新阶段的钩子函数：
1、static getDerivedStateFromProps ：组件 props 或者 state 变化时调用
2、shouldComponentUpdate ： 返回布尔值，true则组件会重新渲染，false则不会重新渲染。
3、render ：定义并返回组件的界面（react元素）。
4、getSnapshotBeforeUpdate ：在更新DOM之前调用，必须要返回一个值，要与
componentDidUpdate() 方法一起使用。5、componentDidUpdate ： 页面更新之后调用
import React, { Component } from 'react'
export default class LifeCycleComponent extends Component {
constructor(){
super();
this.state = {
text:"测试文本"
}
}
clickHandle(){
this.setState({
text:"修改数据"
})
}
render() {
return (
组件生命周期
{ this.state.text }
)
}
// shouldComponentUpdate() 方法会返回一个布尔值，指定 React 是否应该继续渲染，默认值是 true， 即state 每次发生变化组件都会重新渲染。
shouldComponentUpdate(nextProps,nextState){
// 在这里可以获取最新的props和state
return true;
}
// 使用率低
// getSnapshotBeforeUpdate() 方法在最近一次渲染输出（提交到 DOM 节点）之前调用
// 在 getSnapshotBeforeUpdate() 方法中，我们可以访问更新前的 props 和 state。
// getSnapshotBeforeUpdate() 方法需要与componentDidUpdate() 方法一起使用，否则会出现错误
getSnapshotBeforeUpdate(prevProps,prevState){
console.log("更新DOM前",prevState);
return null;
}
//DOM更新之后执行
componentDidUpdate(prevProps, prevState){
console.log("更新DOM后",this.state);
}
}组件生命周期_卸载
卸载阶段指的是组件从DOM移除的过程。
组件卸载时会调用的钩子函数：
1、componentWillUnmount ：组件卸载之前调用。我们可以在这个钩子函数里面执行必要的清理操作。例如，清除定时器，关闭持续的网络连接，移除监听器等。
//子组件
componentWillUnmount(){
console.log('子组件马上要被移除卸载了！！！')
}//父组件
onChange = () => {
this.setState({
showChild:false
})
}
render() {
return (
父组件
{this.state.text}
{this.state.showChild&&表单_受控组件
使 React 的 state 成为表单显示的“唯一数据源”，并且使用React控制用户输入过程中表单发生的操作。
这种由state驱动的表单元素就叫做“受控组件”。
html
react
import React, { Component } from 'react'
export default class FormTest extends
Component {
constructor(){
super();
this.state = {
username:""
}
}
onNameChange=(e)=>{
this.setState({
username:e.target.value
})
}
onSubmit=(e)=>{
e.preventDefault();
console.log(this.state.username);
}
render() {
return (
)
}
}表单_受控组件处理多个输入
当页面有多个输入框的时候，为每个输入框都添加一个独立的事件处理函数太过麻烦。
我们可以给每个元素添加 name 属性，并让处理函数根据 event.target.name 的值选择要执行的操作。
import React, { Component } from 'react'
export default class FormTest extends
Component {
constructor() {
super();
this.state = {
username: "",
password: ""
}
}
onChange = (e) => {
this.setState({
[e.target.name]: e.target.value
})
}
onSubmit = (e) => {
e.preventDefault();
console.log(this.state.username,this.state.password);
}
render() {
return (
)
}
}