React组件传参，生命周期

一、父传子

1. props传参

// 1. 类式组件
class ComC extends React.Component {
    render() {
        return (
            {/* 类式组件通过 `this.props.xx`获取参数 */}
            <div>{this.props.title}</div> 
        )
    }
}

// 2.函数式组件
function ComF(props) {
    return (
        // 函数式组件，通过 函数入参 传递参数
        <div>{props.title}</div>
    )
}

class App extends React.Component {
    render (){
        return (
            <ComC title="这是类式组件"/>
            <ComF title="这是函数式组件"/>
        )
    }
}

props说明

1. props是只读对象（readOnly）

根据单向数据流的要求，子组件只能读取props的数据，不能修改。

2. props可以传递任意数据

数字、字符串、数组、对象、布尔、函数、jsx

function Son(props) {
    cosnt {list, obj, jsxObj} = props; //解构
    return (
        {/*
            <div>
                {props.list.map(item => (
                    <p key="item">{item}</p>
                ))}
                <p>{props.obj.name}</p>
                {props.jsxObj}
            </div>
            */}
            {/*支持解构*/}
            <div>
                {this.props.list.map(item => (
                    <p key="item">{item}</p>
                ))}
                <p>{this.props.obj.name}</p>
                {this.props.jsxObj}
            </div>
    )
}

class App extends React.Component {
    state = {
        list:[1,2,3],
        obj:{
            name: "李白",
            age: 1200
        }    }
    render (){
        return (
            <Son 
                list={this.state.list}
                obj={this.state.obj}
                jsxObj="<span>这是传递的jsx对象</span>"
                />
        )
    }
}

二、子传父

子组件调用父组件传递过来的函数，将要传递的数据作为实参传入该函数即可。

function Son(props){
    const {handler} = props;

    return (
        <button onClick={() => handler('子组件传递给父组件的值')}></button>
    )
}

class App extends React.Component {
    handler = (text) => {
        console.log(text);
    }
    
    render(){
        return (
            <Son handler={handler} />
        )
    }
}

生命周期：

图解：

 class Life extends React.Component{
      // 构造器
      constructor(props){
        console.log('Life构造器---constructor');
        super(props)
        this.state={num:0}
      }
      // 计算+1功能
      add=()=>{
        const {num} = this.state
        this.setState({num:num+1})
      }
      // 删除组件
      death=()=>{
        ReactDOM.unmountComponentAtNode(document.getElementById('text'))
      }
      force=()=>{
        this.forceUpdate()
      }
      // 将要挂载
      componentWillMount(){
        console.log('Life将要挂载---componentWillMount');
      }
      // 已经挂载
      componentDidMount(){
        console.log('Life已经挂载---componentDidMount');
      }
      // 删除触发
      componentWillUnmount(){
        console.log('Life删除触发---componentWillUnmount');
      }
      // 是否应该改变数据
      shouldComponentUpdate(){
        console.log('Life是否改变数据---shouldComponentUpdate');
        return true
      }
      // 将要改变数据
      componentWillUpdate(){
        console.log('Life将要改变数据---componentWillUpdate');
      }
      // 改变数据
      componentDidUpdate(){
        console.log('Life改变数据---componentDidUpdate');
      }
      render(){
        console.log('Life---render');
        const {num} = this.state
        return(
          <div>
          <h1>计数器：{num}</h1> 
          <button onClick={this.add}>点我+1</button> 
          <button onClick={this.death}>删除</button> 
          <button onClick={this.force}>不更改任何状态的数据，强制更新</button> 
          </div>
        )
      }
    }
    // 渲染页面
    ReactDOM.render(<Life />, document.getElementById('text'))

挂载步骤：

更新步骤：

删除：

总结：

初始化阶段: 由ReactDOM.render()触发—初次渲染

1. constructor() ---构造器

2. componentWillMount() ---将要挂载

3. render() ---render

4. componentDidMount() ---挂载时

更新阶段: 由组件内部this.setSate()或父组件重新render触发

1. shouldComponentUpdate() ---是否要进行更改数据

2. componentWillUpdate() ---将要更新数据

3. render()

4. componentDidUpdate() ---更新数据

卸载组件: 由ReactDOM.unmountComponentAtNode()触发

componentWillUnmount() ---卸载

重要的勾子

1.render：初始化渲染或更新渲染调用

2.componentDidMount：开启监听, 发送ajax请求

1. componentWillUnmount：做一些收尾工作, 如: 清理定时器

即将废弃的勾子

1.componentWillMount

2.componentWillReceiveProps

2. componentWillUpdate

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。