React组件

组件的生命周期

概念：在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件，统称为组件的生命周期；
组件生命周期分为三部分：
- 组件创建阶段：组件创建阶段的生命周期函数，有一个显著的特点：创建阶段的生命周期函数，在组件的一辈子中，只执行一次；
componentWillMount: 组件将要被挂载，此时还没有开始渲染虚拟DOM
render：第一次开始渲染真正的虚拟DOM，当render执行完，内存中就有了完整的虚拟DOM了
componentDidMount: 组件完成了挂载，此时，组件已经显示到了页面上，当这个方法执行完，组件就进入都了运行中的状态
- 组件运行阶段：也有一个显著的特点，根据组件的state和props的改变，有选择性的触发0次或多次；
componentWillReceiveProps: 组件将要接收新属性，此时，只要这个方法被触发，就证明父组件为当前子组件传递了新的属性值；
shouldComponentUpdate: 组件是否需要被更新，此时，组件尚未被更新，但是，state 和 props 肯定是最新的
componentWillUpdate: 组件将要被更新，此时，尚未开始更新，内存中的虚拟DOM树还是旧的
render: 此时，又要重新根据最新的 state 和 props 重新渲染一棵内存中的虚拟DOM树，当 render 调用完毕，内存中的旧DOM树，已经被新DOM树替换了！此时页面还是旧的
componentDidUpdate: 此时，页面又被重新渲染了，state 和虚拟DOM 和页面已经完全保持同步
- 组件销毁阶段：也有一个显著的特点，一辈子只执行一次；
componentWillUnmount: 组件将要被卸载，此时组件还可以正常使用；

vue中的生命周期图
 React Native 中组件的生命周期

React中组件的生命周期

defaultProps

在组件创建之前，会先初始化默认的props属性，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用 constructor 构造器中的 this.state = {}，来初始化组件的状态。

React生命周期的回调函数总结成表格如下：
React生命周期表格
组件生命周期的执行顺序：

Mounting：

constructor()
componentWillMount()
- 这个函数，是组件的虚拟DOM元素，将要挂在到页面上的时候执行，此时虚拟DOM还没有创建，render函数中创建的，所以此时还没有进虚拟DOM
render()
- 当进入到render函数饿时候，就已经开始渲染虚拟DOM了，当render执行完，我们的虚拟DOM也就在内存中创建好了，但是，此时虚拟DOM并没有挂载到真正的页面上。
componentDidMount()
- 表示组件已经完成了挂载，此时，我们的state上的数据和内存中的虚拟DOM，以及浏览器中的页面，已经完全保持一致了，到这里，我们组件创建阶段的生命周期函数已经执行完毕了，页面第一次渲染好。

Updating：

componentWillReceiveProps(nextProps)
- 通过状态或属性的改变，都能够出发组件的更新，组件要接收新的props属性，只有当外界传递给子组件的属性被修改了，才会触发这个钩子函数。
shouldComponentUpdate(nextProps, nextState)
- 组件是否需要被更新
componentWillUpdate(nextProps, nextState)
- 组件将要被更新，此时还没更新
render()
- 重新渲染内存中的虚拟DOM对象
componentDidUpdate(prevProps, prevState)
- 此时组件已经完成了更新，页面是新的

Unmounting：

componentWillUnmount()
- 在这个钩子函数中，组件尚可被使用，还没有开始卸载。

通过Counter计数器的小案例 - 了解生命周期函数

给组件设置默认属性：
给属性进行类型校验，需要先运行cnpm i prop-types --save

组件初始化时生命周期事件总结

componentWillMount：
render：
componentDidMount：
注意：在render函数中，不能调用setState()方法

prop-types 校验

安装npm i prop-types

在有状态组件中，又一个 static propTypes 的静态方法，可以把外界传递过来的属性进行校验，具体如下：

import React from 'react'
import ReactType from 'prop-types'

export default class Counter extends React.Component {
  constructor() {
    super()
    this.state = {}
  }

  // 如果没有传递数据，后面运行肯定会报错，所以这里用于设定，没传数据时的默认值
  static defaultProps = {
    initcount: 0 // 如果外界没有传递initcount，那么，自己初始化一个数值
  }

  // 这是一个静态对象，可以把外界传递过来的属性，做类型校验，如果做类型校验，必须安装React 提供的第三方包，叫做： prop-types 
  // prop-types 在V15之前没有单独抽离出来，还和React包在一起，后来从V15之后，官方把类型校验的模块，单独抽离为一个包。
  static propTypes = {
    initcount: ReactType.number //使用prop-types包来定义 initcount 为number类型
  }
  render () {
    return <div>
      <h3>这是一个计数器</h3>
      <button> + 1</button>
      <h4>当前数量是： {this.props.initcount}</h4>
      <hr />
    </div>
  }
}

钩子函数

componentWillMount

在组件即将加载到页面上的时候执行，此时组件尚未挂载到页面中，此时虚拟DOM还没在内存中创建。
此时，无法获取到页面上的任何元素，因为虚拟DOM和页面都还没开始渲染。这个阶段不能操作页面上的DOM元素。
此时可以调用执行函数和获取this.state 数据。
这个函数相当于vue中的created 钩子函数

		componentWillMount () {
    console.log(this.state)
  }

componentDidMount

当组件挂载到页面之后，会静如这个生命周期函数，只要进入这个生命周期函数了，页面上已经有可见的DOM元素

componentDidMount () {
    console.log('test')
  }

shouldComponentUpdate

运行到这个函数，可以判断组件是否需要更新，返回值必须是布尔类型
当函数返回false时，则不会往下执行，而是直接返回到了运行中的状态。此时，由于后面的render没有被调用，所以页面不会更新，而数据却被修改了。
在这个函数中获取到的 this.state 的值一般是上一次运行的值，要想获取到最新的值，需要在这个函数的形参中使用使用nextProps 和nextState 这两个参数。
```
shouldComponentUpdate (nextProps, nextState) {
	
}componentWillUpdate
```

componentWillUpdate

进入这个函数代表组件将要更新，此时还未更新，在这个钩子函数中，内存中的虚拟DOM是旧的，页面上的DOM元素也是旧的。

componentDidUpdate

组件完成了更新，此时state 虚拟DOM 页面上都是最新的，此时，可以放心的操作DOM页面了

通过原生的方式获取元素并绑定事件

React中使用ref属性获取DOM元素引用

使用React中的事件，绑定count自增

组件运行中事件的对比

shouldComponentUpdate：
componentWillUpdate：
render：
componentDidUpdate：

绑定this并传参的三种方式

在事件中绑定this并传参：

    <input type="button" value="在事件中绑定this并传参" onClick={this.handleMsg1.bind(this, '🍕', '🍟')} />

    // 在事件中绑定this并传参
    handleMsg1(arg1, arg2) {
        console.log(this);
        // 此时this是个null
        this.setState({
            msg: '在事件中绑定this并传参：' + arg1 + arg2
        });
    }

在构造函数中绑定this并传参:

    // 修改构造函数中的代码：
    this.handleMsg2 = this.handleMsg2.bind(this, '🚗', '🚚');

    <input type="button" value="在构造函数中绑定this并传参" onClick={this.handleMsg2} />

    // 在构造函数中绑定this并传参
    handleMsg2(arg1, arg2) {
        this.setState({
            msg: '在构造函数中绑定this并传参：' + arg1 + arg2
        });
    }

用箭头函数绑定this并传参：

    <input type="button" value="用箭头函数绑定this并传参" onClick={() => { this.handleMsg3('👩', '👰') }} />

    // 用箭头函数绑定this并传参
        handleMsg3(arg1, arg2) {
            this.setState({
                msg: '用箭头函数绑定this并传参：' + arg1 + arg2
            });
        }

绑定文本框与state中的值

在Vue.js中，默认可以通过v-model指令，将表单控件和我们的data上面的属性进行双向数据绑定，数据变化和页面之间的变化是同步的！
在React.js中，默认没有提供双向数据绑定这一功能，默认的，只能把state之上的数据同步到界面的控件上，但是不能默认实现把界面上数据的改变，同步到state之上，需要程序员手动调用相关的事件，来进行逆向的数据传输！
绑定文本框和state的值：

    {/*只要将value属性，和state上的状态进行绑定，那么，这个表单元素就变成了受控表单元素，这时候，如果没有调用相关的事件，是无法手动修改表单元素中的值的*/}
    <input style={{ width: '100%' }} ref="txt" type="text" value={this.state.msg} onChange={this.handleTextChange} />

    // 这是文本框内容改变时候的处理函数
    handleTextChange = () => {
        this.setState({
            msg: this.refs.txt.value
        });
    }

注意setState的一个问题：

// 保存最新的state状态值，在保存的时候，是异步地进行保存的，所以，如果想要获取最新的，刚刚保存的那个状态，需要通过回掉函数的形式去获取最新state
this.setState({
    msg: this.refs.txt.value
    // msg: e.target.value
}, function () {
    // 获取最新的state状态值
    console.log(this.state.msg);
});

发表评论案例

扩展

context特性

记住一串单词组合getChildContextTypes
前3个、后3个、后两个
一个方法、两个静态属性

类型校验
 Animation Add-Ons

posted @ 2019-07-20 21:03 fsdffsdf 阅读(182) 评论(0) 收藏举报

刷新页面返回顶部

Loading

hello word

React组件

React组件

组件的生命周期

defaultProps

通过Counter计数器的小案例 - 了解生命周期函数

组件初始化时生命周期事件总结

prop-types 校验

钩子函数

componentWillMount

componentDidMount

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

通过原生的方式获取元素并绑定事件

React中使用ref属性获取DOM元素引用

使用React中的事件，绑定count自增

组件运行中事件的对比

绑定this并传参的三种方式

绑定文本框与state中的值

发表评论案例

扩展

context特性

相关文章