React 高级API用法 Context&Refs转发
1、Context
前言
react 中组件数据传递是通过props属性 单向传递的，但当组件层级过多时组件数据传递会变繁琐。Context允许数据隔代传递，而不必显式的通过组件树逐层传递props。从而使局部数据“共享”。
使用场景
- 父组件用Provider生产数据，子组件使用Consumer消费数据
- 父组件用Provider生产数据，组件使用ContextType接收数据（只用于类组件）
- 动态和静态Context(父组件更新Context，被Provider包裹的子组件刷新数据，没被Provider包裹的子组件使用Context默认值)
- 在嵌套组件中更新Context(子组件通过Context传递的函数更新数据)
- 消费多个Context （createContext多个Context对象父组件通过Provider 层层嵌套子组件，子组件通过Consumer 层层嵌套取数据）
ProductContext.js：创建的Context组件文件
ProviderPage.js：父组件(数据生产者)
MiddlePage.js：中间组件
ConsumerPage.js：子组件(数据消费者)
GrandSonPage.js：子组件(数据消费者)
场景1：父组件用Provider生产数据，子组件使用Consumer消费数据
src\page\context\part_1\ProviderPage.js
场景2：父组件用Provider生产数据，组件使用ContextType接收数据（只用于类组件 因为需要使用static）
作用：contextType 可以简化 context 的使用，不使用 consumer 也可以共享变量
src\page\context\part_2\ProviderPage.js
场景3：动态和静态Context(父组件更新Context，被Provider包裹的子组件刷新数据，没被Provider包裹的子组件使用Context默认值)
作用：contextType 可以简化 context 的使用，不使用 consumer 也可以共享变量
src\page\context\part_3\ProviderPage.js
场景4：在嵌套组件中更新Context(子组件通过Context传递的函数更新数据)
子组件通过调用父组件context中的函数 通知父组件更新状态 从而达到子传父组的效果
src\page\context\part_4\ProviderPage.js
场景5：消费多个Context （createContext多个Context对象父组件通过Provider 层层嵌套子组件，子组件通过Consumer 层层嵌套取数据）
父组件中通过多层嵌套 将context 传入子组件 使数据更有层次
2、Refs转发
什么是refs
Refs 是一个 获取 DOM节点或 React元素实例的工具。在 React 中 Refs 提供了一种方式，允许用户访问DOM 节点或者在render方法中创建的React元素。
创建 Refs
1、React.createRef() 【React >=16.3】
这种方式既可以在函数组件中使用，也可以在class组件中使用。
class App extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
console.log(this.myRef)
console.log(this.myRef.current)
}
render() {
return <div ref={this.myRef}>React.createRef()</div>
}
}
2、React.useRef() 【React >=16.8】
这种只可以在函数组件中使用。
const App = ()=>{
const myRef = React.useRef(null)
//const myRef = React.createRef() 两种创建 ref 对象的方式都可以
React.useEffect(()=>{
console.log(myRef)
console.log(myRef.current)
},[]) //模拟生命周期
return (
<div ref={myRef}>React.useRef()</div>
)
}
3、回调 Refs
const App = () => {
// 初始化定义ref
let myRef = null;
// 初始化定义ref
React.useEffect(() => {
console.log(myRef)
console.log(myRef.current)
}, []) //模拟生命周期
return (
<div ref={(ref) => myRef = ref} >回调 Refs</div>
)
}
class App extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
console.log(this.myRef)
console.log(this.myRef.current)
}
render() {
return <div ref={ref => this.myRef = ref}>React.createRef()</div>
}
}
- 当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底DOM 元素作为其 current 属性。
- 当 ref 属性用于 class 组件时，ref 对象的current属性为组件实例对象 。
- 函数组件无法使用 ref 属性，因为他们没有实例。
Refs转发应用场景
解决获取子组件通内部的 DOM 元素/方法.
const FancyButton = React.forwardRef((props, ref) => {
let myRef
useImperativeHandle(ref, () => {
return {
func
};
})
function func() {
console.log('执行我', myRef);
}
return <button ref={ref => myRef = ref} className='FancyButton' > {props.children}</button >
})
function App() {
let myHandle
React.useEffect(() => {
// useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。
console.log(myHandle)
console.log(myHandle.func())
}, []) //模拟生命周期
return (
<FancyButton ref={handle => myHandle = handle} >Click me</FancyButton>
)
}
使用props自定义onRef/onRefDom属性 用于获取子组件方法或属性
缺点：如果一个组件被多次使用，正常情况下想要调用其组件内的方法需要传入props来调用，每次传入的话就比较多余。
class Child extends React.Component {
constructor(props) {
super(props);
this.props.onRef && this.props.onRef(this);
}
func() {
console.log("执行我")
}
render() {
return (<div ref={node => this.props.onRefDom(node)}>子组件</div>);
}
}
class App extends React.Component {
handleOnClick = () => {
}
componentDidMount() {
console.log(this.Child)
console.log(this.ChildDom)
this.Child.func();
}
render() {
return (<div>
<button onClick={this.handleOnClick}>click</button>
<Child onRef={node => this.Child = node} onRefDom={node => this.ChildDom = node}></Child>
</div>);
}
}
