Day35-100React组件通信基础介绍
学习目标是什么？在此过程中，将重复使用的逻辑和功能代码拆分成组件。在根组件下，多个组件共同构成了我们看到的整个页面。(二)什么是组件通信1.组件通信的定义根据刚才的解释，我们知道组件与组件之间传递值就是组件通信。2、那么React组件通信有什么特点呢？React遵循自上而下的数据流，即单向数据流。例如，数据从父节点传递到子节点。如果顶级（父）道具之一发生变化，React将重新渲染所有子节点。为什么React被设计为单向数据流？就是因为单向的数据流，简单易追溯。不会像网状流量那样发生。比如父组件的数据通过props传给子组件，子组件更新props，就会引起父组件和其他关联组件的数据更新，UI渲染也会用数据更新。可能造成严重的数据乱序和不可控。3.组件通信的类型组件通信的类型有：父子组件、兄弟组件（非嵌套组件）、祖父组件（跨级组件）接下来我们通过父子组件之间的通信来介绍用法.（四）组件通讯的基本使用1.安装步骤网址：https://create-react-app.dev/...yarncreatereact-appmy-app#npxcreate-react-appmy-appcdmy-appyarnstartnpx存在版本问题，这里采用yarn的安装方式2.类型类别类组件功能组件类组件（性能不如功能组件【需要实例化】）状态生命周期组件名，必须大写//类组件classDemoClassextendsReact.Component{constructor(props){super(props)this.state={name:'传智播客',}}render(){return(Hello~Class-{this.props.name}
);}}//函数组件函数DemoHooks(props){constdivTitle="我是APP";constdivStyle={color:'red',fontSize:'30px'}//箭头函数constclickBtn=()=>{console.log('[点击2]>')props.setName('传智--');}return(
Hi~Hooks
我是P标签--{divTitle}--{props.name}
点击事件 );}exportdefaultDemoHooks;const{name,age}=this.props//类组件3，子组件的父组件借助state渲染给子组件，props为传递给组件，然后使用setState方法改变；在class组件中，使用this.setState方法实现//父组件类AppextendsReact.Component{constructor(props){super(props)this.state={name:'北京',count:0}}setName=(name)=>{this.setState({name:name+this.state.count++})console.log('[子组件修改父组件的方法setName]>',this.state.name)}render(){return(<>
);}}//subcomponent//function组件函数DemoHooks(props){constdivTitle="我是APP";constdivStyle={color:'red',fontSize:'30px'}//箭头函数constclickBtn=()=>{console.log('[点击2]>')props.setName('北京--');}return(Hi~Hooks
我是P标签--{divTitle}--{props.name
点击事件 );}4.兄弟组件之间的通信刚刚我们提到React是一种单向数据流，那么兄弟组件之间应该如何通信呢？是不是通过父组件，创建一个变量，传递给子组件，如果要通信？然后按照this.setState的方法，从子组件执行父组件props的方法调用。更改父组件中的数据后，将其更新到所有子组件。同样，跨级的子节点也可以通过这种方式改变。好了，综上所述，今天我们讲的是React组件之间的通信方式，从函数组件到类组件。学习了React单向数据流传递的实现机制，父组件通过props传递给子组件，子组件通过this.setState与父组件通信更新数据，以及兄弟组件传值的方式。与上述相关的问题：单向数据绑定vs双向数据绑定所谓数据绑定，就是指View层和Model层之间的映射关系。单向数据绑定：Model的更新会触发View的更新，View的更新不会触发Model的更新。它们的功能是单向的。双向数据绑定：Model的更新会触发View的更新，View的更新也会触发Model的更新。它们的功能是相互的。https://segmentfault.com/a/11...修改Props需要通过状态改变需求，传递给组件，改变内部的Props。修改写在最后。在学习的路上，我经常懈怠。《有想实现目标需要监督的同学嘛~》https://mp.weixin.qq.com/s/Fy...如果有需要的小伙伴可以加我微信：ardenzhaogx或者关注公众号：国行聊天成长（我会分享成长方法）
