学无止境,望君把握时间。
1.父子通信:
1.父组件将一个数据传递给子组件,但这个数据只有父组件能够修改,子组件不可以。
2.ref绑定:
1.ref = "son"
2.ref = { el => this.el = el} 如果是一个函数,这里的el指的就是当前组件 【推荐】
2. 子父通信:
父组件通过传递一个方法到子组件中,子组件可以根据这个方法来修改父组件中的数据。
3.跨组件通信:
原先的跨组件通信需要一级一级的传递,效率非常低下,但可以使用context来解决这个问题。
context 使用步骤:
1.创建context:
const MyContext = React.createContext(""默认值)
2.使用创建的 context来包裹目标组件的父组价。
<MyContext.Provider>
<Father></Father>
</MyContext.Provider/>
3.在目标组件中定义一个类属性,这个类属性叫contextType
4.直接在目标组件中使用this.contextType就可以获得到数据了。
class Son extends Component {
static contextType = MyContext
render () {
<div>
<p>
{this.contextType}
</p>
</div>
}
}
4.非父子组件通信(多组件状态下数据共享)
1.react-router (react路由版本3)/ react-router-dom(react路由版本4)
2.flux
3.redux
4.mobx
5.高阶组件(HOC)
1.什么是高阶组件:
高阶组件是一个函数,这个函数接受一个参数,一个参数就是一个组件
2.格式如下:
const HOC = ( Comp ) => {
return class 类名称 extends React.Component{
render () {
return <Comp></Comp>
}
}
}
3.使用高阶组件的优点就是
可以组件复用 (简单来说就是js中的函数封装 ,便于调用,减少代码冗余)
高阶组件举例:
import React, { Component } from 'react';
// 高阶组件
const Hoc = ( Comp ) => {
return class Banner extends Component{
banner () {
//假设我定义个方法,这个方法就是实现一个轮播图
return 'banner'
}
render () {
return <Comp banner = { this.banner }></Comp>
}
}
}
class A extends Component {
render () {
return (
<div>
<h3> A组件 </h3>
{ this.props.banner() }
</div>
)
}
}
class B extends Component {
render () {
return (
<div>
<h3> b组件 </h3>
{ this.props.banner() }
</div>
)
}
}
const HocA = Hoc( A )
const HocB = Hoc( B )
class C extends Component {
render () {
return (
<div>
<h3> C组件 </h3>
<HocA></HocA>
<hr/>
<HocB></HocB>
</div>
)
}
}
export default C