react 小记

时隔半年，再次复习一下react

刚刚自己画了个react生命周期图，简版：

react生命周期图.png

顺便画了个react 技术栈的思维导图：

react.png

最后再提一提web component 这是一个规范 组件主要考虑2点：1.可复用 2.可维护

React 组件生命周期

组件的生命周期可分为以下三个状态:

• Mounting：已经插入真实Dom
• Updating: 正在被重新渲染
• Unmounting:已移除真实Dom

image.png

constructor() {
        super();
        console.log("constructor!");
        this.state = {
            comments: []
        }
    }
    componentWillMount() {
        console.log("componentWillMount!");
        this._loadComments();

    }

    componentWillReceiveProps() {
        console.log('Component WILL RECEIVE PROPS!')
    }

    shouldComponentUpdate() {
        return true;
    }

    componentWillUpdate() {
        console.log('Component WILL UPDATE!');
    }

    componentDidUpdate() {
        console.log('Component DID UPDATE!')
    }

    componentWillUnmount() {
        console.log('Component WILL UNMOUNT!')
    }
  
    render(){
        return(
)
      }

image.png

在es6中我们直接使用constructor 来初始化data

从父组件传东西到子组件，通过props。

如果从子组件传东西到父组件呢？ 也可以利用props，但是传递的是一个handle（value）函数。