持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

🎈大家好，我是橙橙子，新人初来乍到，请多多关照~

📝小小的前端一枚，分享一些日常的学习和项目实战总结~

😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~

组件生命周期

生命周期是每个框架的根基。要知道在什么节点做什么事。

生命周期函数

componentWillMount
只会在装载之前调用一次，在 render 之前调用，你可以在这个方法里面调用 setState 改变状态，并且不会导致额外调用一次 render
componentDidMount
只会在装载完成之后调用一次，在 render 之后调用，从这里开始可以通过 ReactDOM.findDOMNode(this) 获取到组件的 DOM 节点。
componentWillReceiveProps
更新组件触发，不会在首次 render 组件的周期调用
shouldComponentUpdate
更新组件触发，不会在首次 render 组件的周期调用
componentWillUpdate
更新组件触发，不会在首次 render 组件的周期调用
componentDidUpdate
更新组件触发，不会在首次 render 组件的周期调用
componentWillUnmount
卸载组件触发

`render`

render组装生成这个组件的 HTML 结构

`getInitialState`

初始化 this.state 的值，只在组件装载之前调用一次

`getDefaultProps`

该方法只会在组件创建时调用一次并缓存返回的对象（即在 React.createClass 之后就会调用）。

因为这个方法在实例初始化之前调用，故在这个方法里面不能依赖 this 获取到这个组件的实例。

在组件装载之后，这个方法缓存的结果会用来保证访问 this.props 的属性，当这个属性没有在父组件中传入（在这个组件的 JSX 属性里设置），也总是有值的。

当使用 ES6 语法的话，可以直接用 defaultProps 这个类属性来替代

DOM 操作

我们只要关注设置组件的状态（setState），不需要通过查询 DOM 元素去更新组件的 UI，访问DOM有以下2种方法

findDOMNode（）

🌳举个栗子：

import { findDOMNode } from 'react-dom';

componentDidMound() {
  const el = findDOMNode(this);
}

Refs

设置 ref 属性，通过this.refs.name 来访问对应的 DOM 元素。如果 ref 是设置在原生 HTML 元素上，它拿到的就是 DOM 元素，如果设置在自定义组件上，它拿到的就是组件实例，这时候就需要通过 findDOMNode 来拿到组件的 DOM 元素。

注意点：可以使用 ref 取到的组件定义的任何公共方法

组件间通信

父子组件间通信

通过 props 属性传递，在父组件给子组件设置 props，然后子组件就可以通过 props 访问到父组件的数据／方法，这样就搭建起了父子组件间通信的桥梁。

🌳举个栗子：

import React, { Component } from 'react';
import { render } from 'react-dom';

class List extends Component {
  handleClick(i) {
    console.log('You clicked: ' + this.props.items[i]);
  }

  render() {
    return (
      <div>
        {this.props.items.map((item, i) => {
          return (
            <div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div>
          );
        })}
      </div>
    );
  }
}

render(
  <List items={['Apple', 'Banana', 'orage']} />, mountNode
);

🌳React进阶之组件

组件生命周期

生命周期函数

render

getInitialState

getDefaultProps