React note7（脚手架：this.props.children&state&属性传值&强制刷新&）

this.props.children

---

this.props.xxx，对象的属性与组件的属性是一一对应的，但是有一个例外this.props.children属性，它表示组件的所有子节点。

this.props.children的值有三种可能：
1、如果当前组件没有子节点，它就是undefined；
2、如果有一个子节点，数据类型是Object；
3、如果有多个子节点，数据类型就是array。

现在来思考一个问题：如果在组件调用的开标签和关标签之中写入内容是否会渲染呢？

如果什么都不做，肯定不能渲染。不过如果在该组件中有{this.props.children}，就能进行渲染。而且这句话放在该组件的什么位置，在组件调用时写入组件间的内容就会显示在什么位置（位置自由）。

是不是有点像vue中的slot槽口。

第一个例子 ：得到组件的所有子节点

实现的功能是组件调用时内部写入一些内容，然后能在页面中显示出来。


效果截图：

第二个例子 ：得到组件

组件Fu被调用时，在组件开闭标签间写调用组件Zi，如果没有在Fu组建中写入{this.props.children}，Zi的内容不会展示在页面上，反之则可以。

>>Father.js

import React, { Component } from 'react'
import Fu from "./fu.jsx"
import Zi from "./zi.jsx"
export default class home extends Component {
    render() {
        return (
            <div>
                <h3>I'm Father.</h3>
                <Fu>
                    <Zi/>
                </Fu>
            </div>
        )
    }
}

>>fu.js

import React, { Component } from 'react'
export default class fu extends Component {
    render() {
        return (
            <div>
                <h5>{this.props.children}</h5>
            </div>
        )
    }
}

>>zi.js

import React, { Component } from 'react'
export default class zi extends Component {
    render() {
        return (
            <div>
                <p>I'm Zi.</p>
            </div>
        )
    }
}

第三个例子 ：处理多个子节点

在前面的例子中，我们可以得知，使用this.props.children就可以得到组件的所有子节点。那么怎么去处理这些子节点呢？我知道两类方法。

先把组件间的内容写一下：

>>Father.js

import React, { Component } from 'react'
import Fu from "./fu.jsx"
export default class home extends Component {
    render() {
        return (
            <div>
                <h3>I'm Father.</h3>
                <Fu>
                    <p>{"<Fu>p_1</Fu>"}</p>
                    <p>{"<Fu>p_2</Fu>"}</p>
                    <p>{"<Fu>p_3</Fu>"}</p>
                </Fu>
            </div>
        )
    }
}

第一类：this.props.children 。

import React, { Component } from 'react'
export default class fu extends Component {
    render() {
        return (
            <div>
                <h3>I'm Fu.</h3>
                <ul>
                    {
                        this.props.children.map((item, index) => {
                            return (
                                <li>{item}</li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

第二类：React.Children 。
如果有多个子节点，可以使用React 提供的一个工具方法 — React.Children 来处理。

React.Children中包含了一些方法来对子节点进行处理：

state&属性传值&强制刷新

---

React脚手架中使用state同本地模式一样。先是创建一个构造函数，然后super继承一下，改变指向到该组件的实例，然后创建state，此后可以通过setState方法更改state里的值。

js中ES6语法的super到底是什么：https://www.jianshu.com/p/2a5a7352f4e5

（一）使用state修改值：

（二）属性传值

两种方式传值给函数，动态的改变state，修改内容。

使用es6的箭头函数传值

在函数中创建接收数据的形参：

不能只写this.fun(“参数”)，会在没有点击的时候就自动调用函数。

使用bind()来进行传递

（三）强制刷新forceUpdate()

forceUpdate()重新调用render渲染。有些变量不在state上，而你又想达到这个变量更新的效果，可以通过刷新render来实现。

之前本地模式学习时，我们有把ReactDOM.render()这个方法封装到一个函数里面，在没有使用state时，想要改变一个数据，就调用这个封装好的函数，重新调用render方法，重新渲染。然后这个forceUpdate()强制刷新函数跟之前的类似，只不过，这个是官方提供的。而且，官方不推荐使用这种方法，还是能用state的就用state。

总结

---

这节讲了一些小知识点。

this.props.children可以帮助我们在组件被调用时，向组件开闭标签之间传入的内容能够被展示出来；state能够自动调用render函数，省了我们很多事；如果遇到用不了state的情况，还想重现渲染dom，这时没办法了，可以使用forceUpdate()来强制刷新。