持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

函数式组件

函数式组件可以接收参数，所以只有props。但是不能使用其他两大属性（state，refs），除非用到react的高级用法hooks ，因为函数式组件没有this，同样函数式组件也可以对属性进行类型和必要性的限制以及默认标签属性。

props是组件（包括函数组件和类式组件）中的内置属性，主要作用是在父节点中吧数据传递给子节点，也就是从组件外向组件内传递变化的数据。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习React</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel">
        function Translate(props) {
            const { province, city1, city2, town } = props
            return (
                <ul>
                    <li>我是{province}的</li>
                    <li>{province}{city1}的</li>
                    <li>{city1}{city2}市</li>
                    <li>{city2}市{town}</li>
                </ul>
            )
        }
        Translate.propTypes = {
            province: PropTypes.string.isRequired
        }
        Translate.defaultProps = {
            town: '六库'
        }
        const p = { province: '云南', city1: '怒江', city2: '泸水' }
        ReactDOM.render(<Translate {...p} />, document.getElementById('test'))
    </script>
</body>

</html>

注意：

propTypes 是react里的要求
Proptypes 引入的prop-types.js库

propTypes写成proptypes也不会报错，限制会失效，React不认识这个属性了。

props总结

每个组件对象都会有props(properies的简写)属性
组件标签的所有属性都保存在props中,组件内部读取某个属性值使用：this.props.XXX
props 是只读的属性，不能在组件内修改

作用

从标签属性从组件外部向组件内传递变化的数据 组件内部不要修改props数据

对peop中属性值进行类型限制和必要的性的限制

第一种方式（React15.5开始已弃用）：

        Translate.propTypes = {
            province: React.PropTypes.string.isRequired
        }

第二种方式（需要人引入prop-types库）：

        Translate.propTypes = {
            province: PropTypes.string.isRequired
        }

属性扩展

使用扩展运算符打开对象

<Translate {...p} />

默认属性

Translate.defaultProps = {
    town : '六库'
}

组件类的构造函数

constructor(props){
    super(props)
    console.log(props)
}

React 学习笔记（9）函数式组件使用props& props总结