• react复习总结(2)--react生命周期和组件通信


    这是react项目复习总结第二讲

    第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html

    首先我们来学习下react的生命周期(钩子)函数。

    什么是react生命周期呢?

    就是指react组件执行时在某个特定的时间点自动调用执行的函数。

    首先一图献上:

    流程图显示:

    1.getDefaultProps时是定义默认值。

    2.页面首次渲染:getInitialState时是定义默认状态-->然后componentWillMount(渲染前执行)-->render(渲染)-->componentDidMount(渲染后执行)

    3.页面更新:当执行this.setState后,先执行shouldComponentUpdate(是否需要更新,一般为true)-->componentWillUpdate(更新前执行)-->render(渲染)-->componentDidUpdate(更新后执行)

    根据平时开发经历:不变的数据一般建议直接使用this.props渲染到render中,如果需要后期变化的数据可以先存着state中,使用this.state渲染到render中,后期使用this.setState进行修改。

    如果有的数据要在渲染前就改变数据。可以使用this.props或this.state直接修改,然后渲染render。

    ES5传统创建组件方式是这样的:

    getDefaultProps:设置组件默认的props(属性)

    getInitialState:设置组件默认的state(状态)

    执行顺序是:

    另外,getDefaultProps函数组件未创建实例时就会被执行。

    除了上面的ES5,还有现在大多数被使用的是ES6模式创建组件。

    以类的方式作为组件,使用的组件就是这个组件类的对象。

    static defaultProps:设置默认属性

    constructor:用于设置默认状态 初始化。必须使用super,之后才能使用this

    执行顺序:

    componentWillMountcomponentDidMount 这2个生命周期是首次进入页面render前执行的

    顺序:

    componentWillReceiveProps 是组件的传入属性父组件修改后执行的:

    接收到父组件传入的新props

    父组件修改传入属性的方式:

    传入的值是个state就可以。

    (这是组件通信的一种方式,属于父子组件关系的通信,这是父传子

    要实现子传父的话,那父组件调用子组件时传个回调函数获取就可以了

    如:

    这是父组件render

    父组件回调函数

    这是子组件属性被修改函数,执行这个回调函数即可执行父组件函数

    这里这么用,父组件传值给子组件后,子组件能立即回调父组件,形成有来有回。

    点击按钮,这里输出111。

    直接子传父的方法:

    父:

    子:

    父组件传个回调给子组件,子组件通过this.props可调用到这个函数,子就可以传值给父组件了。

  • 相关阅读:
    文件操作一写操作
    文件操作一读操作
    python基础初识
    while循环和格式化输出
    python基础数据类型一(整数类型和布尔值)
    CentOS 6下安装nodejs 0.9.0(转)
    CentOS安装Python教程
    Discuz! X2.5数据库字典(转)
    SQL 语句中的union操作符
    thinkphp空操作和配置文件实现简化路由
  • 原文地址:https://www.cnblogs.com/wuhairui/p/10515918.html
Copyright © 2020-2023  润新知