stateless component
组件化开发思想第一条是：
- 函数就是组件，组件就是函数。
import React from 'react';
const ComponentA = (props) => {
return <h1>ComponentA, welcome {props.name}</h1>
}
const App = () => {
const componentA1 = <ComponentA name="magicly" />
const componentA2 = ComponentA({ name: "magicly" });
console.log(typeof componentA1, typeof componentA2, typeof ComponentA);
console.log(componentA1, componentA2);
return (
<div className="App">
<componentA1 />
{componentA1}
{componentA2}
</div>
);
}
export default App;
可以看到ComponentA是函数，所以ComponentA({ name: "magicly" })是函数调用，所以componentA1其实就是函数调用的结果，类型是object。而<ComponentA name="magicly" />其实也是调用了函数，所以两种写法结果是一样的。
但是我把componentA1和componentA2打印出来，发现两个object并不完全一致:
componentA1的type是function ComponentA(props)
componentA2的type是"h1"
而实际渲染出来的DOM结构则完全一样。
还要注意，因为componentA1和componentA2已经是React组件了， 所以再写<componentA1 />或<componentA2 />没有意义，相当于是在一个object上做函数调用，是会报错的， 不过React没有报错， 只是什么都没有输出而已。而如果你直接写{componentA1()}则会得到报错说TypeError: componentA1 is not a function， 从这里可以看出<ComponentA />这种方式确实不完全等同于ComponentA()。
当然， 按照习惯， 我们还是用JSX的语法，写成html标签的形式:
<ComponentA name="magicly" />
Stateless Component vs Class Component
React里面有两种定义Component的方式，另外一种是基于class的：
class ComponentB extends React.Component {
render() {
return <h1>ComponentB, welcome {this.name}</h1>
}
}
那应该选哪种方式呢？每个人都有自己的taste，但我的建议是： Stateless Component 。 stateless顾名思义就是没有state，实际上用函数定义的component除了没有state，还没有任何react组件的生命周期方法，也没有this！就是一存粹天真的函数，如此而已。所以简单直接，代码还可以少敲几行！
best practice是：
用Stateless组件定义一堆小组件，并包含样式。 然后在要用到state或者生命周期函数的时候再用class组件包一层，只写逻辑，而把渲染样式等转发给stateless组件。
如果你用redux等来管理状态了， 那么理论上而言，你是不会需要写这些包装组件的，因为react-redux自己会包装一层，也就是说你再也不需要class定义的组件了。
注意，我说的是如果你用redux的话应该是不用class组件的， 我并没有说为了不用class组件，你要用redux哈！
下次再看到class定义的组件， 请考虑一下重构成stateless component，如果你觉得实在没法重构，请出门散散步，回来继续思考！