React 组件生命周期学习 高阶组件 PropTypes

React组件生命周期：

1.生命周期三个状态：
	Mounting：已插入真实的DOM
	Updating：正在被重新渲染
	Unmounting：以被移除DOM
2.生命周期：
	componentWillMount：在渲染前调用，在客服端也在服务端
	componentDidMount: 在第一次渲染后调用，只在客户端。之后组件已经生成对应的DOM结构，可以通过this.DOMNode()来进行访问
	componentWillReceiveProps在组件接收到一个新的props时被调用，这个方法在初始化render时不会被调用

参考:https://blog.csdn.net/zhou_xiao_cheng/article/details/52461414

如果是一个无状态的JavaScript函数（没有state）来定义是没有什么生命周期的，因为它只是简单的函数输出

function StatelessFunc(props) {
	return <div>{props.name}</div>
}

对于生命周期：
1.componentWillMount()
仅在render()方法前被调用一次，如果在该方法中调用了setState方法去改变组件的状态值，那么调用render()后，将会直接看到改变过了的状态值，并且不论状态值怎么改变，componentWillMount()都不会再被调用。

class Demo extends React.Component {
	constructor() {
		super();
		this.state = {
			value: 0
		}
	}
	componentWillMount() {
		this.setState({
			value: this.state.value + 1
		})
	}
	render() {
		return (
			<div>{this.state.value}</div>
		);
	}
}

2.componentDidMount()，仅在render()方法后被立即调用一次（客户端），相对于父组件而已，该方法在字组件中会想被调用，

组件规范：
1.render：对于一个组件来说，render()方法是必须的，通常，在这个方法里，我们都会返回一个元素，也可以是false OR null 这意味着没有东西渲染

2.getInitialState()：在ES6中，这个方法，可以写成下面的主要（this.state的值就是转态的初始值，），其效果一样的

class Demo extends React.Component {
	constructor() {
		super()
		this.state = {
			key: value
		}
	}
}

3.getDefaultProps(): Demo.defaultProps = {key: value}
ES7中可以这样写：

class Demo extends React.Component {
	static defaultProps = {
		key: value
	}
}

4.propTypes

Demo.propTypes = {
	requiredFunc: React.PropTypes.func.isRequired
}

ES7中写法：
class Demo extends React.Component {
	static propType = {
		requiredFunc: React.PropTypes.func.isRequired
	}
}

5.static:在es6中，static关键字则允许我们定义一个在组件类中能够调用的静态方法和属性

PropTypes方法：

在我们自己写了一个组件，我们需要验证别人在使用这个组件时，是不是提供了符合我们要求的参数，这时就可以使用组件类的PropTypes属性了。

参考链接：https://www.cnblogs.com/soyxiaobi/p/9559117.html

getDefaultProps()，调用1次
getInitialState()，调用1次
componentWillMount()，调用1次
render()，调用>=1次
componentDidMount()：仅客户端，调用1次

执行顺序：constructor—componentWillMount–render–componentDidMount

PropTypes 代码规范：

propTypes
ES6的语法中，写法如下（想了解更多propTypes请戳官方propTypes介绍）：

Demo.propTypes = {
  requiredFunc: React.PropTypes.func.isRequired
}

同样，在ES7中，可以写成下面这样：

class Demo extends React.Component {
  static propTypes = {
    requiredFunc: React.PropTypes.func.isRequired  // 任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,
  }
}

for example：

var title = '1';
// var title = 123;
class MyTitle extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.title}</h1>
    );
  }
}

MyTitle.propTypes = {
  title: PropTypes.string,
  
};
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

参考：https://www.jianshu.com/p/a73fb26c88b5