共计 2508 个字符,预计需要花费 7 分钟才能阅读完成。
学习指标
- 是什么
- 特点
- 根本应用阐明
- 手写应用实战
(一)为什么须要组件通信
咱们晓得,React 为了实现一次代码编写屡次应用的目标,咱们在应用 React 开发的过程中,会将反复屡次应用逻辑和性能代码拆成了一个个组件,在根组件下,多个组件独特组成了咱们看到的一整个页面。
(二)什么是组件通信
1、组件通信的定义
依据方才的解说,咱们晓得了组件和组件的传值就是组件通信。
2、那么 React 组件通信有什么特点呢?
React 遵循从上到下的数据流向,即单向数据流。
比方,数据是从父节点传递到子节点。如果顶层(父级)的某个 props 扭转了,react 会从新渲染所有的子节点。
为什么是 React 要设计成单向数据流的模式呢?
是因为单向数据流,简略容易回溯。不会产生,网状数据流的状况。
比方,父组件的数据通过 props 传递给子组件,子组件更从新了 props,这样会导致父组件和其余关联组件的数据更新,UI 渲染也会随着数据而更新。可能会导致重大的数据错乱和不可管制。
3、组件通信类型
组件通信的类型有:
- 父子组件
- 兄弟组件(非嵌套组件)
- 祖孙组件(跨级组件)
接下来,咱们以父子组件之间的通信来介绍下用法。
(四)组件通信的根本用法
1、装置步骤
网址:https://create-react-app.dev/…
yarn create react-app my-app
# npx create-react-app my-app
cd my-app
yarn start
npx 有版本问题,这里采纳了 yarn 的装置形式
2、类型
类别
- 类组件
- 函数组件
类组件(性能不如函数组件【须要实例化】)state 生命周期
组件名,肯定要大写
// 类组件
class DemoClass extends React.Component {constructor(props) {super(props)
this.state = {name: '传智播客',}
}
render() {
return (
<div className="App">
<h1>Hello~Class-{this.props.name}</h1>
</div>
);
}
}
// 函数组件
function DemoHooks(props) {
const divTitle = "我是 APP";
const divStyle = {
color: 'red',
fontSize: '30px'
}
// 箭头函数
const clickBtn = () => {console.log('[ 点击 2] >')
props.setName('传智 --');
}
return (<div title={divTitle} className="App" style={divStyle} >
<h1>Hi~Hooks</h1>
<p> 我是 P 标签 --{divTitle}--{props.name}</p>
<button onClick={clickBtn}> 点击事件 </button>
</ div >
);
}
export default DemoHooks;
const {name,age}=this.props //class 组件
3、子组件父组件再渲染到子组件
借助了 state 实现了,把 props 传递到组件中,再借助 setState 办法来更改;
在 class 组件中,借助 this.setState 办法来实现。
// 父组件
class App extends React.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 (
<>
<DemoHooks setName={this.setName} {...this.state}></DemoHooks>
<DemoClass {...this.state} />
</>
);
}
}
// 子组件
// 函数组件
function DemoHooks(props) {
const divTitle = "我是 APP";
const divStyle = {
color: 'red',
fontSize: '30px'
}
// 箭头函数
const clickBtn = () => {console.log('[ 点击 2] >')
props.setName('北京 --');
}
return (<div title={divTitle} className="App" style={divStyle} >
<h1>Hi~Hooks</h1>
<p> 我是 P 标签 --{divTitle}--{props.name}</p>
<button onClick={clickBtn}> 点击事件 </button>
</ div >
);
}
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 须要通过 state 更改需要,传到组件中,扭转外部的 Props 批改