React中的props
React中的props
组件是React中重要特性之一。我们可以将一个复杂的UI分解成多个基本组件。在开发了基本组件之后，我们可以将所需的组件组合在一起创建一个复杂的UI（也称为复杂的组件）。React中使用props和state控制组件中的数据流。但刚接触React的同学对这些所谓的props和state都会感到困惑，那么要掌握React就有必要掌握props和state。在接下来的内容中我们主要围绕着React的props和state和大家一起讨论。
组件
时至今日，在Web开发中都在提Web组件。在React中也避免不了这个话题，换句话说，组件的概念也是React中的三大支柱之一。使用React开发应用基本都是在使用组件（其实在Vue的开发也是类似，也是围绕着组件进行）。虽然我们在《React中创建组件的方式》和《初探React中函数组件和类组件的差异》和大家一起学习过React中创建组件的方式和不同方式之间的差异。但这些并不重要，重要的是我们想了解或者学习props和state对组件的影响。
简单地说，在React中怎么通过props和state来改变组件。
那么什么是组件呢？@Linton Ye在他的博文《Components, Props and State》中用一个房子形象的描述了组件是什么？
整幢房子好比一个UI组件，只不过这个组件的每个部分都可以拆分出来成为一个独立的组件。正如上图所示，房子House是一个大组件，其中房顶Roof、窗户Window、门Door和墙Wall也是一个组件，并且这些组件组合在一起成为一个大的组件，即House组件。
如果我们换到一个Web页面中来说的话，上面的房子就好比下图：
也就是说，React组件被视为用户界面构建的模块。这些组件都存在于相同的空间中，但彼此又是独立执行的。React中的组件都有自己的结构和方法。它们最大的特性就是可以重复使用。为了更好的理解，可以将整个UI看到一棵树，这棵树常常被称为UI树。比如上面的Web页面，如果转换成一棵UI树的话，大致像下面这样：
在这里，起始组件成为根（好比House，也类似HTML中的html），每个独立的部分成为分支（好比Roof、Window、Door和Wall，也类似上图中的1~5）。当然，这些分支中也可以进一步包含一些其他的分支。
而这些组件（UI）具有组织性，并且可以在根上根据状态和数据做出相应的更改，然后再流向子分支（子组件）。也可以简单地说，组件可以直接从客户端调用服务器，允许DOM在不刷新页面的情况下动态更新。也就是说，可以根据组件的props或state对组件进行动态更新（简单地说，UI看上去不一样）。
同样拿前面的House组件来说，其中Roof我们可以指定它是什么样的颜色（根据自己的喜好将房顶刷成自己喜欢的颜色），当然Wall和Window以及Door也类似于Roof，但不同的是，门Door和窗户Window除了可以根据自己喜欢定制之外，它们还有另外的状态，比如说门是关闭的还是打开的（窗户也是相似的）。
如果将这些放到React中来描述的话，可以用props和state来描述：
- 不管是
Roof、Window、Wall、Window还是Door都可以根据自己的喜欢定制自己的样式风格，而这些风格对应的就是React组件中的props（Property的缩写）。如果换到HTML中来的话，props就相当于HTML标签元素的属性（即attributes） - 对于
Window和Door而言除了可以定制自己喜欢的风格之外还有其他的状态，比如说他们是关闭状态还是打开状态。 相应的，在React中，我们可以通过state来控制
要是用一句话来描述的话：
看上去是一句简单的话，但对于React的初学者而言，props和state是复杂的。既然他们是复杂的，我们就有必要一步一步的来分析和学习他们，只有这样我们才能更好的掌握好React。
props和state是什么
在React组件中，state是影响组件渲染的内部数据集。在一定程度上，state可以看作是React组件的私有数据或数据模型。React组件state是可变的。当React组件的内部state改变后，组件将根据新的状态重新渲染自己。比如Window和Door可以是关闭的也可以是打开的。
而props是React组件的属性，看起来像HTML属性（Attributes）。在React组件中的props的值通常从父组件中传递。
props的解释
props是properties的简写，可以被定义为一种数据从组件传递到组件的方式，基本上就是从父组件传递到子组件。将一个数据从一个React组件传递到另一个组件，主要是因为不想让组件渲染静态数据，而是将动态数据传递给组件。这也正是React的props发挥其作用的地方。
同样拿@Linton Ye创建的房子来说，你可能创建多幢房子，但又不希望这些房子是千篇一律的。你可能喜欢红色的房顶，他可能喜欢蓝色的房顶，还有人喜欢粉红色的房顶。那么我们就可以通过给House组件透传一个props的值来控制房顶Roof的颜色。比如下面这样的一个示例：
详细代码请参考上面的示例，下面列出关键性代码。根据不同用户的喜好，创建的房子有可能房顶颜色会不一样。也就是说颜色color是一个动态的。在这里我们可以通过给House组件透传一个props属性值让用户可以根据自己喜欢配置房顶颜色：
const Roof = ({color}) => {
return <img src={IMAGES.roof} className="roof" style={{background: `${color}`}} />
}
const House = (props) => {
return (
<div className='house'>
<Roof color={props.color} />
<Wall />
<Window />
<Door />
</div>
)
}
const App = () => {
return (
<>
<House color="blue" />
<House color="red" />
<House color="salmon" />
</>
)
}
你可能已经看到了，blue、red和salmon值传给了color属性（简称props），即这些值分别传递给<House />组件。
甚至我们可以更激进一些。比如我们希望房子除了房顶不一样之外，还可以其他部件不一样。简单地说，<House />组件的其他部位也可以像房顶一样通过props来透传。就上面的示例，我们可以像下面这样来进行改造：
// 创建房顶组件
const Roof = ({color, roofSrc}) => {
return <img src={roofSrc} className="roof" style={{background: `${color}`}} />
}
// 创建墙
const Wall = ({wallSrc}) => {
return <img src={wallSrc} className='wall' />;
}
// 创建窗户
const Window = ({windowSrc}) => {
return <img src={windowSrc} className='window' />;
}
// 创建门
const Door = ({doorSrc}) => {
return <img src={ doorSrc } className='door' />;
}
// 创建房子
const House = (props) => {
return (
<div className='house'>
<Roof color={props.color} roofSrc={props.roofSrc} />
<Wall wallSrc={props.wallSrc} />
<Window windowSrc={props.windowSrc} />
<Door doorSrc={props.doorSrc} />
</div>
)
}
const App = () => {
return (
<House
color="blue"
roofSrc="/uploads/allimg/191027/12035a432-3.png?1515785259159"
wallSrc="/uploads/allimg/191027/12035a434-4.png?1501113882297"
windowSrc="/uploads/allimg/191027/120359AN-5.png?1501113882112"
doorSrc="/uploads/allimg/191027/1203591139-6.png?1501113881433"
/>
)
}
你将看到的效果如下：
另外，在React中不能直接将属性传递给目标组件。这是因为React遵循这样的规则：
这意味着在发送属性时不能跳过子组件层，子组件也不能将属性发送回父组件。在实际使用的时候，还可以使用默认的props值，以防父组件没有向下传递props。比如上面的示例，我们就可以给每个子组件设置一个默认的props值：
const House = (props) => {
// 声明房子默认需要的属性值
const IMAGES = {
roof: '/uploads/allimg/191027/12035a432-3.png?1515785259159',
wall: '/uploads/allimg/191027/12035a434-4.png?1501113882297',
window: '/uploads/allimg/191027/120359AN-5.png?