组件可以将UI切分成一些独立的、可复用的部件，这样就只需专注于构建每一个单独的部件。
组件从概念上看就像是函数，它可以接收任意的输入值（称之为props），并返回一个需要在页面上展示的React元素。
const me = { name: 'JavaEdge', age: "18", gender: 'boy' } ReactDOM.render(<div> 123 <Hello name={me.name}></Hello> </div>, document.getElementById('example'));
但是怎么在界面中输出 name 呢，就需要组件接收该属性：
// 创建组件的方式一 function Hello(props) { // 如果在一个组件中 return null，则表示该组件空的，什么都不会渲染 // 在组件中，必须返回一个合法的JSX虚拟DOM元素 console.log(props) return <div>这是Hello组件 - {props.name}</div> }
补全属性：
function Hello(props) { return <div>这是Hello组件 - {props.name} - {props.age} - {props.gender}</div> }
ES6 中应该这么写：
ReactDOM.render(<div> 123 <Hello {...me}></Hello> </div>, document.getElementById('example'));
注意这些 props 是只读的哦：
function Hello(props) { props.name = 'javascript' return <div>这是Hello组件 - {props.name} - {props.age} - {props.gender}</div> }
向外暴露组件，需要配置识别文件后缀名哦
定义一个组件最简单的方式是使用JavaScript函数
该函数是一个有效的React组件，它接收一个单一的“props”对象并返回了一个React元素。
之所以称这种类型的组件为函数定义组件，是因为从代码来看，它就是一个js函数。
也可使用 ES6 的 class 来定义一个组件
上面两个组件在React中是相同的。
注意，在类中定义组件时，必须定义一个 render 函数
-
否咋报错
Norendermethod found on the returned component instance: you may have forgotten to definerender.
render 函数还必须有返回值
-
否咋报错
Uncaught Invariant Violation: Index.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
const me = { name: 'JavaEdge', age: "18", gender: 'boy' } ReactDOM.render(<div> {/*这里的 Index 标签，就是 Index 类的一个实例对象*/} {/*这里就是外界传来的 me，可用 props 访问*/} <Index {...me}> </Index> </div>, document.getElementById('example')); class Index extends React.Component { render() { return ( <div> {/*不同于function，如果想使用外界传过来的 props 参数，无需接收，直接访问 this.props.xxx 即可,注意加上大括号，当做 js 执行，而非字符串*/} 这是 Index 组件 --- {this.props.name} -- {this.props.age} </div> ); } }
对比
“无状态组件”（用得少）
用构造函数创建出来的组件。使用function创建的组件，只有props, 没有自己的私有数据和生命周期函数。
“有状态组件”（使用最多）用class关键宇创建出来的组件。使用class关键字创建的组件,有自己的私有数据(this.state) 和生命周期函数。如果一个组件需要有自己的私有数据时使用。
- 有状态、无状态组件的本质区别 有无state属性
- props中的数据都是外界传递过来的
- state/data中的数据，都是组件私有的; (通过Ajax获取回来的数据，-般都是私有数据)
- props 中的数据都是只读的;不能重新赋值
- state/data中的数据，都是可读可写的
-
在前面，我们遇到的React元素都只是DOM标签
-
React元素也可以是用户自定义的组件
当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为props
例如,这段代码会在页面上渲染出”Hello,sss”
我们来回顾一下在这个例子中发生了什么：
- 我们对元素调用了ReactDOM.render()
- React将{name: 'sss'}作为props传入并调用Welcome组件
- Welcome组件将 Hello, sss 元素作为结果返回。
- React DOM将DOM更新为 Hello, sss
组件名称必须以大写字母开头。 例如，
组件可以在它的输出中引用其它组件，这就可以让我们用同一组件来抽象出任意层次的细节 在React应用中，按钮、表单、对话框、整个屏幕的内容等，这些通常都被表示为组件
例如，我们可以创建一个App组件，用来多次渲染Welcome组件
通常，一个新的React应用程序的顶部是一个App组件 但是，如果要将React集成到现有应用程序中，则可以从下而上使用像Button这样的小组件作为开始，并逐渐运用到视图层的顶部
警告: 组件的返回值只能有一个根元素 这也是要用一个
你可以将组件切分为更小的组件，这没什么好担心的。
例如，来看看这个Comment组件：
这个组件接收author(对象)、text(字符串)、以及date(Date对象)作为props，用来描述一个社交媒体网站上的评论
这个组件由于嵌套，变得难以被修改，可复用的部分也难以被复用 所以让我们从这个组件中提取出一些小组件
-
首先，我们来提取Avatar组件：
Avatar作为Comment的内部组件，不需要知道是否被渲染 因此我们将author改为一个更通用的名字user
建议从组件自身的角度来命名props，而不是根据使用组件的上下文命名
现在我们可以对Comment组件做一些小小的调整
接下来，我们要提取一个UserInfo组件，用来渲染Avatar旁边的用户名
这可以让我们进一步简化Comment组件
提取组件一开始看起来像是一项单调乏味的工作，但是在大型应用中，构建可复用的组件完全是值得的 当你的UI中有一部分重复使用了好几次（比如，Button、Panel、Avatar），或者其自身就足够复杂（比如，App、FeedStory、Comment），类似这些都是抽象成一个可复用组件的绝佳选择，这也是一个比较好的做法
Props的只读性无论是使用函数或是类来声明一个组件，它决不能修改它自己的props。
-
来看这个sum函数
类似于上面的这种函数称为“纯函数”，它没有改变它自己的输入值，当传入的值相同时，总是会返回相同的结果
与之相对的是非纯函数，它会改变它自身的输入值
React是非常灵活的，但它也有一个严格的规则：
所有的React组件必须像纯函数那样使用它们的props
当然，应用的界面是随时间动态变化的，State可以在不违反上述规则的情况下，根据用户操作、网络响应、或者其他状态变化，使组件动态的响应并改变组件的输出。
-
function形式
es6形式
存储组件自身需要的数据。可读可写，它的每次改变都会引发组件的更新。
每次数据的更新都是通过修改 state 属性的值，然后 ReactJS 内部会监听 state 属性的变化，一旦发生变化，就会触发组件的 render 方法来更新 DOM 结构。
props属性
props 是一个对象，是组件用来接收外面传来的参数的。
组件内部是不允许修改自己的 props 属性，只能通过父组件来修改。上面的 getDefaultProps 方法便是处理 props 的默认值。
