前端

这篇笔记记录了React与props相关的一些基础知识

一、本堂课重点内容

  • props相关知识点

二、详细知识点介绍

1、props定义

  • props 是调用方传递给组件的数据（类似于函数的形参），而 state 是在组件内被组件自己管理的数据（类似于在一个函数内声明的变量）。
  • props 是不可修改的，所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。 由于 props 是传入的，并且它们不能更改，因此我们可以将任何仅使用 props 的 React 组件视为 pureComponent，也就是说，在相同的输入下，它将始终呈现相同的输出。

2、props基本使用

  • 从组件外部传入变量值
class Vup extends React.Component{
    render(){
        const {name,age,sex} = this.props
        return (
            <ul>
                <li>姓名：{name}</li>
                <li>性别：{sex}</li>
                <li>年龄：{age+1}</li>
            </ul>
        )
    }
}
//渲染组件到页面
ReactDOM.render(<Person name="azusa" age={17}  sex="女"/>,document.getElementById('test1'))
ReactDOM.render(<Person name="nanami" age={17} sex="女"/>,document.getElementById('test2'))
  • props的简写方式：...运算符
    • 在JS中，...运算符不能展开一个对象，但是可以利用{...obj}语法构造字面量对象
    • 但是，在props简写方法中的{...obj}的作用并非复制一个对象，反而就是展开对象（绕了一圈结果还是展开），这是因为babel允许在React标签中这样使用
const vup = {name: 'azusa', age: '17', sex: '女'};
ReactDOM.render(<Person {...vup}, document.getElementById('azi')/>);
  • 补充JS小知识：数组的reduce方法
    • reduce(callback,initiaValue)会传入两个变量，回调函数(callback)和初始值(initiaValue)
    • 如果没有传入初始值，则 reduce 方法会对从第二个元素开始的每个元素调用callback函数
    • 如果提供了初始值（initiaValue）,则 reduce 方法会对数组中的每个元素调用一次callback函数
  • 对传入的props属性进行限制
    • 类型限制：如果不对props进行限制，使用该组件的人不知道应该传入什么类型的值，从而导致错误
    • 必要属性限制：有些属性必须指定
    • 操作方法：15.x版本之前使用React.PropTypes，16.x之后引入prop-types，用于对组件标签属性进行限制
    // 设置Vup的属性类型限制
Vup.propTypes = {
    name: PropTypes.string.isRequired, // 姓名必填且必须为字符串类型
    sex: PropTypes.string,
    age: PropTypes.number,
    speak: PropTypes.func, // 限制speak为函数
};
// 设置Vup的属性默认值
Vup.defaultProps = {
    sex: '未知',
    age: 18,
}
  • props的简写：将props的限制通过static方法写到类里面
class Vup extends React.Component {
    static propTypes = {
        ...
    }
    static defaultProps = {
        ...
    }
}
  • 类组件中的构造器与props
    • 构造器是否接收props，是否传递给super，取决于是否希望在构造器中通过this访问props
    constructor(props) {
    super(props);
    console.log('constructor', this.props); //通过this访问props，这种情况必须接收props
}
  • 函数式组件使用props
    • 通过函数参数接收props
    • props的类型限制通过类.属性的方式赋值给函数类
    function Vup(props) {
    const {name, age, sex} = props;
    return (...)
}
Vup.propsTypes = {...}
Vup.defaultProps = {...}

三、实践练习例子

  • 已在上一节中列出

四、课后个人总结

  • 注意复习掌握JavaScript中类的定义与用法，区分类组件和函数式组件中props的用法。

五、引用参考