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

state与props区别

props 与state最大的区别是props是不可变的，之前展示例子中类组件都是需要定义 state 来更新和修改数据。而子组件只能通过 props 来传递数据。

使用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/babel">
        class Translate extends React.Component {
            render() {
                const { province, city1, city2, town } = this.props
                return (
                    <ul>
                        <li>我是{province}的</li>
                        <li>{province}{city1}的</li>
                        <li>{city1}{city2}市</li>
                        <li>{city2}市{town}</li>
                    </ul>
                )
            }

        }
        const p = { province: '云南', city1: '怒江', city2: '泸水', town: '六库' }
        ReactDOM.render(<Translate {...p} />, document.getElementById('test'))
    </script>
</body>

</html>

效果：

展开运算符：...

... 这个符号在之前的JQuery时代和Vue中没有见过，是属于ES2015(ES6)中新增的一种基本运算符。用于扩展一个数组对象和字符串。可以将可迭代对象转为用逗号分隔的参数序列。
基本用法例如：

展开运算法合并数组

使用contact也能实现合并数组的功能：

React 展开对象

React 可以展开对象，在原生JavaScript里面不能展开对象，可以测试一下：

babel和react虽然可以使用...展开对象，但是仅仅适用于标签属性的传递。

props限制

对props传递的数据类型进行限制，进行必要性限制，给某一个参数指定默认值下面只做其中的一个字符串限制和必要性限制：

    Translate.propTypes={ 
        province:PropTypes.string.isRequired  //province限制为字符串类型，必须有值
    }

参数默认值：

    Translate.defaultProps={ 
        province:PropTypes.string.isRequired  //province限制为字符串类型，必须有值
    }

还需要单独引入一个prop-types.js文件才能实现这个功能

props只读属性

props 是只读的尝试修改props就报错
可以在渲染的时候进行运算：

class Translate extends React.Component {
    render() {
        const { age } = this.props
         //this.props.age = 14  //会报错,只读属性不能修改
         return (
            <h1>年龄：{age+1}</h1>  //可以进行运算
        )
    }
}

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">
        class Translate extends React.Component {
            static propTypes = {
                province: PropTypes.string.isRequired  //province限制为字符串类型，必须有值
            }
            static defaultProps = {
                town: '六库'  //默认值
            }
            render() {
                const { province, city1, city2, town } = this.props
                return (
                    <ul>
                        <li>我是{province}的</li>
                        <li>{province}{city1}的</li>
                        <li>{city1}{city2}市</li>
                        <li>{city2}市{town}</li>
                    </ul>
                )
            }
        }

        const p = { province: '云南', city1: '怒江', city2: '泸水' }
        ReactDOM.render(<Translate {...p} />, document.getElementById('test'))
    </script>
</body>

</html>

类定义组件的时候一般先会做限制，然后再进行render

构造器：

构造器是否接收props,是否传递给super,取决于是否希望在构造器中通过this访问props。类中的构造器能省略就省略，在开发中几乎不写构造器,

总结

今天学习了一下使用props来传递数据渲染网页和对组件传递的参数进行的限制，学习到原生JavaScript知识，不用记住类似Vue那些语法糖，更能理解到一些语言的底层基础内容感觉收获非很多，虽然有些繁琐。

React 学习笔记（8）组件三大核心属性之二：props