react 生命周期与组件传参

首先介绍一下React

一、React是什么？

React是一个将数据渲染为HTML视图的开源JavaScript库。

二、为什么要使用React

1·原生JavaScript操作DOM繁琐、效率低
2·使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。
3·原生JavaScript没有组件化编码方案，代码复用率低。

三、React特点

1·采用组件化模式、声明式编码，提高开发效率及组件复用率。
2·在React Native中可以使用React语法进行移动端开发。
3·使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互

react 生命周期

// 三个阶段    重要 🚩 componentDidMount 组件挂载完毕
// 挂载阶段
// 01 constructor 构造函数
// 02 static gitDerivedStateFromProps
// 03 render 渲染函数
// 04 componentDidMount 组件挂载完毕
// 更新阶段
// 01 static getDerivedStateFromProps
// 02 shouldCompoentUpdate 组件是否更新(返回true才更新)
// 03 render 渲染
// 04 getSnapshotBeforeUpdate 更新前获取快照(返回值是componentDidUpdate第三个参数)
// 05 componentDidUpdate 组件已经更新
// 卸载阶段

import React, { Component } from 'react'
class Life extends Component {
    constructor(props) {
        super(props);
        // console.log('挂载-01-constructor');
    }
    static getDerivedStateFromProps(props, state) {
        // 当组件的props发生变化的时候，执行回调函数
        // 当props更新用Props更新state
        // console.log('挂载-02-getDerivedStateFromProps');
        console.log("更新:01-getDerivedStateFromProps")
        return props
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log("更新:02 组件是否需要更新");
        return true; //通常用做优化组件,返回true更新,false不更新
    }
    state = { num:5 }
    render() { 
        console.log('挂载-03-render选项');
        return ( <div>
            <h1>生命周期</h1>
            <button onClick={()=>this.setState({num:this.state.num+1})}>{this.state.num}</button>
        </div> );
    }
    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log("更新:04 getSnapshotBeforeUpdate")
        // 获取组件的快照,在更新前
        // 返回的值是下个生命周期的第单个参数
        return {name:"mimu",age:17}
    }
    componentDidUpdate(prevProps, prevState,snap) {
        // 组件已经更新
        console.log("更新:05componentDidUpdate",snap)
    }
    componentDidMount(){
        // console.log('挂载-04-组件已经挂载');
        // 作用：操作dom,发起ajax,添加事件,开启定时器
    }
}

react 组件传参

组件

定义组件
        src/components/Steper.js
在App.js导入组件
        import Steper from './components/Steper'

在App.js render函数中使用
        <Steper></Steper>
        组件名称的首字母必须大写

组件传参

父传子 props

父组件传递
        <Steper  num={5}>
子组件接收
        props.num

默认参

Steper.defaultProps = {
    num:1
}

 子传父,执行父组件的传递过来的props回调函数
子传父:执行回调函数

子传父

父组件 
        定义函数并把函数传递给子组件
        updateSize = (n)=>this.setState({size:n})
        <Steper updateSize={this.updateSize}>
子组件
        执行props.updateSize()
        相当于执行父组件的updateSize方法