React组件
组件可以将UI切分成一些独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。
组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。
函数定义/类定义组件
定义一个组件最简单的方式是使用JavaScript函数：
function Welcome(props) {
return Hello, {props.name}
;
}
该函数是一个有效的React组件，它接收一个单一的“props”对象并返回了一个React元素。我们之所以称这种类型的组件为函数定义组件，是因为从字面上来看，它就是一个JavaScript函数。
你也可以使用 ES6 class 来定义一个组件:
class Welcome extends React.Component {
render() {
return Hello, {this.props.name}
;
}
}
上面两个组件在React中是相同的。
组件渲染
在前面，我们遇到的React元素都只是DOM标签：
const element = ;
然而，React元素也可以是用户自定义的组件：
const element = 当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props”。
例如,这段代码会在页面上渲染出"Hello,Sara":
function Welcome(props) {
return Hello, {props.name}
;
}
// ...
class App extends Component {
render() {
return (
我们来回顾一下在这个例子中发生了什么：
- 我们对
ReactDOM.render()方法。 - React将
{name: 'Sara'}作为props传入并调用Welcome组件。 -
Welcome组件将Hello, Sara
- 将DOM更新为
Hello, Sara
警告:
组件名称必须以大写字母开头。
例如，
表示一个DOM标签，但表示一个组件，并且在使用该组件时你必须定义或引入它。
组合组件
组件可以在它的输出中引用其它组件，这就可以让我们用同一组件来抽象出任意层次的细节。在React应用中，按钮、表单、对话框、整个屏幕的内容等，这些通常都被表示为组件。
例如，我们可以创建一个App组件，用来多次渲染Welcome组件：
function Welcome(props) {
return Hello, {props.name}
;
}
function App() {
return (
通常，一个新的React应用程序的顶部是一个App组件。但是，如果要将React集成到现有应用程序中，则可以从下而上使用像Button这样的小组件作为开始，并逐渐运用到视图层的顶部。
警告:
组件的返回值只能有一个根元素。这也是我们要用一个
元素的原因。提取组件
你可以将组件切分为更小的组件，这没什么好担心的。
例如，来看看这个
Comment组件：function Comment(props) { return (); }
{props.author.name}{props.text}{formatDate(props.date)}这个组件接收
author(对象)、text(字符串)、以及date(Date对象)作为props，用来描述一个社交媒体网站上的评论。这个组件由于嵌套，变得难以被修改，可复用的部分也难以被复用。所以让我们从这个组件中提取出一些小组件。
首先，我们来提取
Avatar组件：function Avatar(props) { return (); }
Avatar作为Comment的内部组件，不需要知道是否被渲染。因此我们将author改为一个更通用的名字user。我们建议从组件自身的角度来命名props，而不是根据使用组件的上下文命名。
现在我们可以对
Comment组件做一些小小的调整：function Comment(props) { return (); }提取组件一开始看起来像是一项单调乏味的工作，但是在大型应用中，构建可复用的组件完全是值得的。当你的UI中有一部分重复使用了好几次（比如，
Button、Panel、Avatar），或者其自身就足够复杂（比如，App、FeedStory、Comment），类似这些都是抽象成一个可复用组件的绝佳选择，这也是一个比较好的做法。Props的只读性
无论是使用函数或是类来声明一个组件，它决不能修改它自己的props。来看这个
sum函数：function sum(a, b) { return a + b; }类似于上面的这种函数称为“纯函数”，它没有改变它自己的输入值，当传入的值相同时，总是会返回相同的结果。
与之相对的是非纯函数，它会改变它自身的输入值：
function withdraw(account, amount) { account.total -= amount; }React是非常灵活的，但它也有一个严格的规则：
所有的React组件必须像纯函数那样使用它们的props。
当然，应用的界面是随时间动态变化的，后面会介绍一种称为“state”的新概念，State可以在不违反上述规则的情况下，根据用户操作、网络响应、或者其他状态变化，使组件动态的响应并改变组件的输出。
组件的生命周期
React组件的生命周期图解
React 生命周期图解组件会随着组件的props和state改变而发生变化，它的DOM也会有相应的变化。一个组件就是一个状态机：对于特定的输入，它总会返回一致的输出。
React组件提供了生命周期的钩子函数去响应组件不同时刻的状态，组件的生命周期如下：
- 实例化阶段
- 存在期阶段
- 销毁期阶段
实例化阶段
首次调用组件时，实例化阶段有以下方法会被调用（注意顺序，从上到下先后执行）：
getDefaultProps这个方法是用来设置组件默认的props，组件生命周期只会调用一次。但是只适合
React.createClass直接创建的组件，使用ES6/ES7创建的这个方法不可使用，ES6/ES7可以使用下面方式：//es7 class Component { static defaultProps = {} }
getInitialState设置state初始值，在这个方法中你已经可以访问到this.props。getDefaultProps只适合React.createClass使用。使用ES6初始化state方法如下：
class Component extends React.Component { constructor(props){ super(props); this.state = { render: true, } } } // 或者这样, es6 stage3 class Component extends React.Component{ state = { render: true } render(){return false;} }
componentWillMount此方法会在组件首次渲染之前调用，这个是在render方法调用前可修改state的最后一次机会。这个方法很少用到。
render这个方法以后大家都应该会很熟悉，JSX通过这里，解析成对应的虚拟DOM，渲染成最终效果。格式大致如下：
class Component extends React.Component{ render(){ return ( ) } }
componentDidMount这个方法在首次真实的DOM渲染后调用（仅此一次）当我们需要访问真实的DOM时，这个方法就经常用到。如何访问真实的DOM这里就不想说了。当我们需要请求外部接口数据，一般都在这里处理。
存在期
实例化后，当props或者state发生变化时，下面方法依次被调用：
componentWillReceiveProps没当我们通过父组件更新子组件props时（这个也是唯一途径），这个方法就会被调用。
componentWillReceiveProps(nextProps){}
shouldComponentUpdate字面意思，是否应该更新组件，默认返回true。当返回false时，后期函数就不会调用，组件不会在次渲染。
shouldComponentUpdate(nextProps,nextState){}
componentWillUpdate字面意思组件将会更新，props和state改变后必调用。
render跟实例化时的render一样，不多说
componentDidUpdate这个方法在更新真实的DOM成功后调用，当我们需要访问真实的DOM时，这个方法就也经常用到。
销毁期
销毁阶段，只有一个函数被调用：
componentWillUnmount没当组件使用完成，这个组件就必须从DOM中销毁，此时该方法就会被调用。当我们在组件中使用了setInterval，那我们就需要在这个方法中调用clearTimeout。
参考：React组件生命周期
参考
- 官网文档
- 老马React视频地址: https://ke.qq.com/course/379234?tuin=1eb4a0a4
- AICODER官网地址：https://www.aicoder.com/