React核心属性props属性及用法详解

组件核心属性-props

需求：自定义用来显示一个人员信息的组件

   class Person extends React.Component {
            render() {
                const { name, age, sex } = this.props;
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>年龄：{age + 1}</li>
                        <li>性别：{sex}</li>
                    </ul>
                )
            }
        }


        ReactDOM.render(<Person name="jerry" age={19} sex="男" dance={dance} />, document.getElementById('test1'))
        ReactDOM.render(<Person name="Lilly" age={18} sex="女" />, document.getElementById('test2'))
        ReactDOM.render(<Person name="双下巴" age={23} sex="不明" />, document.getElementById('test3'))

1. 姓名必须指定，且为字符串类型

           //对标签属性进行类型、必要性的限制
        Person.propTypes = {
            name: PropTypes.string.isRequired,
            sex: PropTypes.string,
            age: PropTypes.number,
            dance: PropTypes.func
        }

2. 性别为字符串类型，如果性别没有指定，默认为男 Person.defaultProps = { sex: '未知', age: 18 } 3. 年龄为数字类型，必须指定 4. 给某个组件添加dance函数，限制dance只能是函数类型

ReactDOM.render(<Person name="jerry" age={19} sex="男" dance={dance} />, document.getElementById('test1'))

function dance() {
    console.log(' be good at dancing')
}

Person.propTypes = {
    dance: PropTypes.func
}

在函数的render函数中打印console.log(this)，可以查看渲染数据的结果

props的性质和作用

1. 每个组件对象都会有props属性
2. 组件标签的所有属性都保存在props中
3. 通过标签属性从组件外向组件内传递变化的数据。
4. 注意：组件内部不要修改props的值

注意可以运算不可以修改。运算和修改的区别如图所示

用法

内部读取某个属性值this.props.name

在render函数里面

console.log(this.props.name)

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

1. 第一种方式（React v15.5开始已弃用） Person.propTypes = { name: React.PropTypes.string.isRequired, sex: PropTypes.string, age: PropTypes.number } 若一直在React身上加PropTypes属性，那么React核心对象会很大。

2. 使用 prop-types库对标签属性进行限制，React代码打包之后会更小一些

    <script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
     <script type="text/babel">
         Person.propTypes = {
            name:PropTypes.string.isRequired,
            sex: PropTypes.string,
            age: PropTypes.number
        }
     </script>

3. 拓展属性：将对象的所有属性通过props传递 const person3 = { name: '双下巴', age: 23, sex: '不 明' } ReactDOM.render(<Person {...person3} />, document. getElementById('test3'))

4. 默认属性值 Person.defaultProps = { 属性:值 }

5. 类式组件类中的构造函数

  constructor(props) {
                super(props)
                this.state = { 属性:值}
                // 解决changeWeather中this指向的问题
                this.组件实例新属性名称 = this.自定义函数.bind(this)
            }

props的基本形式

  <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">

        class Person extends React.Component {
            render() {
                console.log(this)
                const { name, age, sex } = this.props
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>年龄：{age}</li>
                        <li>性别：{sex}</li>
                    </ul>
                )
            }
        }
        ReactDOM.render(<Person name="jerry" age="19" sex="男" />, document.getElementById('test1'))
        ReactDOM.render(<Person name="Lilly" age="18" sex="女" />, document.getElementById('test2'))
        ReactDOM.render(<Person name="双下巴" age="23" sex="不明" />, document.getElementById('test3'))
    </script>

运行截图

批量传递props

花括号加展开运算符接收数据

{...数组或者集合}

介绍一下展开运算符

        let arr1 = [1, 3, 5, 7, 9]
        let arr2 = [1, 2, 3, 4]
        console.log(...arr1);//展开一个数组
        let arr3 = [...arr1, ...arr2]//连接数组
        console.log('arr3:', arr3)
        function sum(...numbers) {
            return numbers.reduce((preValue, currentValue) => {
                return preValue + currentValue
            })
        }
        console.log(sum(1, 2, 3, 4));//10

     let person = { name: 'tom', age: 18 }
     console.log(...person);展开运算符不能展开对象

报错信息 Uncaught TypeError: Spread syntax requires ...iterableSymbol.iterator to be a function 展开运算符不能展开对象。

对传递的标签属性进行类型限制，必要性限制和默认设置。React15使用以下代码进行标签属性限制

        Person.propTypes = {
            name: React.PropTypes.string
        }

React16版本及其以后不再从React身上直接取属性，因为这样可能会使得React变得臃肿。使用prop-types.js，然后

<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>

props的简写方式

如果想要把标签属性的限制和默认值相关代码放在组件类的内部，可以尝试下面的写法(写在组件里面，和render函数是并列关系)

static propTypes = {
    name: PropTypes.string.isRequired,
    sex: PropTypes.string,
    age: PropTypes.number,
    dance: PropTypes.func
};
static defaultProps = {   
    sex: '未知',
    age: 18
}

测试这段代码是否可行，可以将渲染组件到页面的代码去掉性别，dance直接赋值，如果生效会显示关于属性限制的相关的报错

类式组件中的构造器与props

通常在React中，构造函数仅用于以下两种情况

1. 通过给this.state赋值对象来初始化内部state
2. 为事件处理函数绑定实例

构造器是否接收props，是否传递给super取决于是否希望在构造器上通过this访问props

undefined打印了三次是因为页面中有三次渲染

函数式组件使用props

最新的React建议使用函数式组件而不是类式组件。

this.state.x,this.props.name中的this是组件实例对象，函数式组件中没有this，不能state，refs,但是可以props

    <script type="text/babel">

        function Predecessor() {
            const { name, age, address } = props
            return (
                <ul>
                    <li>name:{name}</li>
                    <li>age:{age}</li>
                    <li>address:{address}</li>
                </ul>
            )
        }
        ReactDOM.render(<Predecessor name='LS' age='18' address='Mars' />, document.getElementById('demo1'))
    </script>

props未定义的原因是没有在函数的参数里接收props

上面代码中从函数参数中读取属性也可以写解构的形式

 function Predecessor({ name, age, address }) {
            return (
                <ul>
                    <li>name:{name}</li>
                    <li>age:{age}</li>
                    <li>address:{address}</li>
                </ul>
            )
        }

代码的解构和从函数参数中读取属性是等价的。注意不要忘记花括号，因为属性的集合是一个对象。

对函数式组件属性的限制写在function外部。

最新版的React建议使用函数式组件，所以函数式组件使用props值得关注。