React 18 系统精讲（三）组件中的Props 与 State && 函数组件 与 类组件

一：Props

props :

1.组件对外接口，用于组件间传值（常用于父组件向子组件传递数据）

2.props是只读的，不可在组件内修改，类似于Vue的单项数据流

父组件传值给子组件代码案例：

 父组件引入数据后使用映射robots.map()向子组件传值 

 

二：State

state：

1.组件内部接口，私有的，用于组件内部数据传递

2.只能使用setState() 修改，直接修改state，组件不会触发render函数，页面也不会渲染，使用setState() 修改代码案例如下

this.setState({isOpen: !this.state.isOpen})

3.setState(）是异步的，React 会将多个state的修改合并为一次，所以不能依赖当前state计算下一个

注：构造函数constructor是唯一可以初始化state的地方，初始化state前必须使用此方法 super(Props); ！！！  

 初始化state案例d代码如下：

constructor(Props:Props){   //使用构造函数接收Props并初始化state状态
        super(Props);   //初始化state前必须使用此方法 super(Props); 
        this.state= {
            isOpen: false,
        }
    }

 三：函数组件

定义函数组件：

const Robot:React.FC<RobotPorps> = () => { 
    return (
        
    )
}

export default Robot;

四.类组件

定义类组件（采用entends继承的方式）：

class ShoppingCart extends react.Component<Props,State> { 
    constructor(Props:Props){   //使用构造函数接收Props并初始化state状态
        super(Props);   //初始化state前必须使用此方法 super(Props); 
        this.state= {
            isOpen: false,
        }
    }
    render () {
        return ()
    }  
 
}

注意类组件名称首字母一定要大写，即ShoppingCart S一定大写，使用构造函数接收Props并初始化state状态，初始化state前必须使用此方法 super(Props);