props

一、认识

---

对于在React应用中写的子组件，无论是函数组件FunComponent，还是类组件ClassComponent，父组件绑定在它们标签里的属性/方法，最终会变成props 传递给它们。

React中的props可以为:

• props 作为一个子组件渲染数据源

• props 作为一个通知父组件的回调函数

• props 作为一个单纯的组件传递

• props 作为渲染函数

• render props: 放在了 children 属性上

• render component: 插槽组件

React中props的角色为:

• 在 React 组件层级 props 充当的角色: 一方面父组件 props 可以把数据层传递给子组件去渲染消费。另一方面子组件可以通过 props 中的 callback ，来向父组件传递信息。还有一种可以将视图容器作为 props 进行渲染。

• 从 React 更新机制中 props 充当的角色: 在 React 中，props 在组件更新中充当了重要的角色，在 fiber 调和阶段中，diff 可以说是 React 更新的驱动器，熟悉 vue 的同学都知道 vue 中基于响应式，数据的变化，就会颗粒化到组件层级，通知其更新，但是在 React 中，无法直接检测出数据更新波及到的范围，props 可以作为组件是否更新的重要准则，变化即更新，于是有了 PureComponent ，memo 等性能优化方案。

• 从 React 插槽层面 props 充当的角色: React 可以把组件的闭合标签里的插槽，转化成 Children 属性，一会将详细介绍这个模式

二、语法

---

2.1 类组件

类组件

import React, {Component} from 'react';

interface DataType {
    name:string;
    age:number;
}

interface HelloProps {
    a: string; // 校验 a 属性
    b: number; // 校验 b 属性
    setData: React.Dispatch<React.SetStateAction<DataType>>; // 校验 useState 函数
}

class HelloWord extends Component<HelloProps> {
    constructor(props: HelloProps) {
        super(props);
        this.state = {};
    }

    render(): React.ReactNode {
        const {a, b} = this.props;
        console.log(a, b);
        return <div />;
    }
}

export default HelloWord;

2.2 函数式组件-声明式

函数式组件-声明式

import React from 'react';

interface HelloProps {
     a: string; // 校验 a 属性
    b: number; // 校验 b 属性
    setData: React.Dispatch<React.SetStateAction<DataType>>; // 校验 useState 函数
}

function HelloWord(props: HelloProps): JSX.Element {
    const {a, b} = props;
    return <div>{a}</div>;
}

export default HelloWord;

2.3 函数式组件-表达式

函数式组件-表达式

import React, {FunctionComponent} from 'react';

interface HelloProps {
     a: string; // 校验 a 属性
    b: number; // 校验 b 属性
    setData: React.Dispatch<React.SetStateAction<DataType>>; // 校验 useState 函数
}

const HelloWord: FunctionComponent<HelloProps> = (props) => {
    const {a, b} = props;
    return <div>{a}</div>;
};

export default HelloWord;

四、监听

---

4.1 类组件中

• componentWillReceiveProps: componentWillReceiveProps 可以作为监听 props 的生命周期，但是 React 已经不推荐使用 componentWillReceiveProps ，未来版本可能会被废弃，因为这个生命周期超越了 React 的可控制的范围内，可能引起多次执行等情况发生。于是出现了这个生命周期的替代方案 getDerivedStateFromProps

4.2 函数组件中

• useEffect: 可以用 useEffect 来作为 props 改变后的监听函数