深入理解react笔记

1. render函数没有渲染的作用，只是将jsx转译成一个react.createElement函数。

微信图片_20180503092057.jpg

JSX:

    Save

Transpiled JS:
React.createElement(
    "button",
    { type: "submit" },
    "Save"
);

2.state less:提倡无转态组件

蓝色为stateless，黑色为stateful

微信图片_20180503094134.jpg

这个组件什么都不画，只是做一个心跳动作

import React from 'react';

export default class HeartBeat extends React.Component {
  render() {
    return null;
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      fetch('/api/v1/heartbeat');
    }, 5000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }
}

3.生命周期

• mount

1. componentDidMount 只有在客户端执行

• update
  shouldcomponentupdate 可以截胡，提高性能

因state改变引发的update过程：

shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

因父组件想要render这个组件改变引发的update过程：


componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

这些函数应该都是纯函数

• unmount

3 高阶组件

函数，接收参数，返回一个全新组件

const HoC = (WrappedComponent) => {
    const WrappingComponent = (props) => (
        

            
        
    );
    return WrappingComponent;
};

可以多个参数动态创造不同的组件

const HoC = (WrappedComponent, LoginView) => {
    const WrappingComponent = () => {
         const {user} = this.props;  
         if (user) {
            return 
         } else {
            return 
         }
    };
    return WrappingComponent;
};

4.通信

不推荐用ref来进行通信

5.key

1.兄弟唯一性
2.稳定性

三元表达式不需要用到key

6.总结

一切都是组件，可以是有渲染的，一个没有渲染的。