> For the complete documentation index, see [llms.txt](https://onenesss-organization.gitbook.io/jj-xiaoce/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://onenesss-organization.gitbook.io/jj-xiaoce/react-jin-jie-shi-jian-zhi-nan/05.-ji-chu-pian-shen-ru-props.md).
# 05. 基础篇-深入 props
### 一 前言
React 中的 props 想必大家并不陌生。如果从 React 的组件设计思想出发，组件的作用是什么呢？
一方面，它可以作为渲染UI视图的容器。
另一方面，组件之间就像发动机的各个零件，想要让 React 这台机器运作起来，就要处理好各个零件，也就是各个组件之间的联系，而props 担任的角色就是将每个组件联系起来。
props 是 React 组件通信最重要的手段，它在 React 的世界中充当的角色是十分重要的。有一点必须明确，就是通过第二章节的学习，弄清楚一次 render 的过程，就是调用 React.createElement 形成新的 element 过程，新的 element 上就会有新的 props 属性，这个新 props 就是重新渲染视图的关键所在。所以学好 props，有助于打通 React 组件脉络。
本章节将介绍 React 中 props，学好 props 可以使组件间通信更加灵活，同时文中会介绍一些 props 的操作技巧，和学会如何编写嵌套组件。
### 二 理解props
#### 1 props是什么？
首先应该明确一下什么是 props ，对于在 React 应用中写的子组件，无论是函数组件 `FunComponent` ，还是类组件 `ClassComponent` ，父组件绑定在它们标签里的属性/方法，最终会变成 props 传递给它们。但是这也不是绝对的，对于一些特殊的属性，比如说 ref 或者 key ，React 会在底层做一些额外的处理。首先来看一下 React 中 props 可以是些什么东西？
React 中的 props ，还是很灵活的，接下来先来看一个 demo ：
```js
/* children 组件 */
function ChidrenComponent(){
return In this chapter, let's learn about react props !
}
/* props 接受处理 */
class PropsComponent extends React.Component{
componentDidMount(){
console.log(this,'_this')
}
render(){
const { children , mes , renderName , say ,Component } = this.props
const renderFunction = children[0]
const renderComponent = children[1]
/* 对于子组件，不同的props是怎么被处理 */
return
{ renderFunction() }
{ mes }
{ renderName() }
{ renderComponent }
}
}
/* props 定义绑定 */
class Index extends React.Component{
state={
mes: "hello,React"
}
node = null
say= () => this.setState({ mes:'let us learn React!' })
render(){
return
my name is alien
} // ④ props 作为渲染函数
>
{ ()=> hello,world
} { /* ⑤render props */ }
{ /* ⑥render component */ }
}
}
```
**效果**
如上看一下 props 可以是什么？
* ① props 作为一个子组件渲染数据源。
* ② props 作为一个通知父组件的回调函数。
* ③ props 作为一个单纯的组件传递。
* ④ props 作为渲染函数。
* ⑤ render props ， 和④的区别是放在了 children 属性上。
* ⑥ render component 插槽组件。
那么如上 props 在组件实例上是什么样子：
PropsComponent 如果是一个类组件，那么可以直接通过 this.props 访问到它：
在标签内部的属性和方法会直接绑定在 props 对象的属性上，对于组件的插槽会被绑定在 props 的 Children 属性中。
#### 2 React如何定义的props？
接下来一起总结一下 props 究竟能做些什么？
**在 React 组件层级 props 充当的角色**
一方面父组件 props 可以把数据层传递给子组件去渲染消费。另一方面子组件可以通过 props 中的 callback ，来向父组件传递信息。还有一种可以将视图容器作为 props 进行渲染。
**从 React 更新机制中 props 充当的角色**
在 React 中，props 在组件更新中充当了重要的角色，在 fiber 调和阶段中，diff 可以说是 React 更新的驱动器，熟悉 vue 的同学都知道 vue 中基于响应式，数据的变化，就会颗粒化到组件层级，通知其更新，但是在 React 中，无法直接检测出数据更新波及到的范围，props 可以作为组件是否更新的重要准则，变化即更新，于是有了 PureComponent ，memo 等性能优化方案。
**从React插槽层面props充当的角色** React 可以把组件的闭合标签里的插槽，转化成 Children 属性，一会将详细介绍这个模式。
#### 3 监听props改变
**类组件中**
① componentWillReceiveProps 可以作为监听props的生命周期，但是 React 已经不推荐使用 componentWillReceiveProps ，未来版本可能会被废弃，因为这个生命周期超越了 React 的可控制的范围内，可能引起多次执行等情况发生。于是出现了这个生命周期的替代方案 getDerivedStateFromProps ，在下一章节，会详细介绍 React 生命周期。
**函数组件中**
② 函数组件中同理可以用 useEffect 来作为 props 改变后的监听函数。(不过有一点值得注意, useEffect 初始化会默认执行一次)
```js
React.useEffect(()=>{
// props 中number 改变，执行这个副作用。
console.log('props改变：' ，props.number )
},[ props.number ])
```
#### 4 props children模式
props + children 模式 在 React 中非常常用，尤其对一些优秀开源组件库。比如 react-router 中的 Switch 和 Route ， antd 中的 Form 和 FormItem。
首先来看看 prop + children 的几个基本情况。
**① props 插槽组件**
```js
```
上述可以在 Container 组件中，通过 props.children 属性访问到 Children 组件，为 React element 对象。
作用：
* 1 可以根据需要控制 Children 是否渲染。
* 2 像上一节所说的， Container 可以用 React.cloneElement 强化 props (混入新的 props )，或者修改 Children 的子元素。
**② render props模式**
```js
{ (ContainerProps)=> }
```
这种情况，在 Container 中， props.children 属性访问到是函数，并不是 React element 对象，针对这种情况，像下面这种情况下 children 是不能直接渲染的，直接渲染会报错。
```js
function Container(props) {
return props.children
}
```
如果上述直接这么写，会报如下的错误：
改成如下方式，就可以了。
```js
function Container(props) {
const ContainerProps = {
name: 'alien',
mes:'let us learn react'
}
return props.children(ContainerProps)
}
```
这种方式作用是：
* 1 根据需要控制 Children 渲染与否。
* 2 可以将需要传给 Children 的 props 直接通过函数参数的方式传递给执行函数 children 。
**混合模式**
如果 Container 的 Children 既有函数也有组件，这种情况应该怎么处理呢？
```js
{ (ContainerProps)=> }
```
首先在 Container 里打印 Children 看看是什么？
```js
const Children = (props)=> (
hello, my name is { props.name }
{ props.mes }
)
function Container(props) {
const ContainerProps = {
name: 'alien',
mes:'let us learn react'
}
return props.children.map(item=>{
if(React.isValidElement(item)){ // 判断是 react elment 混入 props
return React.cloneElement(item,{ ...ContainerProps },item.props.children)
}else if(typeof item === 'function'){
return item(ContainerProps)
}else return null
})
}
const Index = ()=>{
return
{ (ContainerProps)=> }
}
```
**效果**
这种情况需要先遍历 children ，判断 children 元素类型：
* 针对 element 节点，通过 cloneElement 混入 props ；
* 针对函数，直接传递参数，执行函数。
#### 5 操作 props 小技巧
**抽象 props**
抽象 props 一般用于跨层级传递 props ，一般不需要具体指出 props 中某个属性，而是将 props 直接传入或者是抽离到子组件中。
**混入 props**
```js
function Son(props){
console.log(props)
return hello,world
}
function Father(props){
const fatherProps={
mes:'let us learn React !'
}
return
}
function Index(){
const indexProps = {
name:'alien',
age:'28',
}
return
}
```
**打印**
Father 组件一方面直接将 Index 组件 indexProps 抽象传递给 Son，一方面混入 fatherProps 。
**抽离props**
有的时候想要做的恰恰和上面相反，比如想要从父组件 props 中抽离某个属性，再传递给子组件，那么应该怎么做呢？
```js
function Son(props){
console.log(props)
return hello,world
}
function Father(props){
const { age,...fatherProps } = props
return
}
function Index(){
const indexProps = {
name:'alien',
age:'28',
mes:'let us learn React !'
}
return
}
```
**打印**
成功的将 indexProps 中的 age 属性抽离出来。
**注入props**
**显式注入props**
显式注入 props ，就是能够直观看见标签中绑定的 props 。
```js
function Son(props){
console.log(props) // {name: "alien", age: "28"}
return hello,world
}
function Father(prop){
return prop.children
}
function Index(){
return
}
```
如上向 Son 组件绑定的 name 和 age 是能直观被看见的。
**隐式注入 props**
这种方式，一般通过 `React.cloneElement` 对 props.chidren 克隆再混入新的 props 。
```js
function Son(props){
console.log(props) // {name: "alien", age: "28", mes: "let us learn React !"}
return hello,world
}
function Father(prop){
return React.cloneElement(prop.children,{ mes:'let us learn React !' })
}
function Index(){
return
}
```
如上所示，将 mes 属性，隐式混入到了 Son 的 props 中。
### 三 进阶实践-实现一个简单的 `