react 小记

作者: zhangjingbibibi | 来源:发表于2018-01-31 20:26 被阅读5次

    时隔半年,再次复习一下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(<div></div>)
          }
    
    image.png

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

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

    如果从子组件传东西到父组件呢? 也可以利用props,但是传递的是一个handle(value)函数。

    相关文章

      网友评论

        本文标题:react 小记

        本文链接:https://www.haomeiwen.com/subject/zgblzxtx.html