一: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);