React Summary（四）

React如何进行组件通信

• 父传子：父组件通过props向子组件传递数据，单向数据流，保证数据的清晰且易跟踪。
• 子传父：
  • 子组件向父组件传递数据，是通过回调函数实现的，父组件定一个函数并通过props传递给子组件，子组件在某个事件发生时，调用该回调函数，从而将数据传给父组件。
  • 绑定ref实例传值。
• 兄弟间传值：由于React是单向数据流，数据从父传给子，因此，在兄弟间传值时，需要它俩共同的父级来协调这一过程
• 无直接关系的组件之间传值
  • ContextAPI可跨组件树传递数据，适用于国际化、主题色。
  • 全局变量+全局事件通信
  • 第三方状态管理库

graph TD;
  A[flux 已废弃];
  B[redux] --> B1[zustand];
  C[mobx] --> C1[valtio];
  D[recoil] --> D1[jotai];

父组件控制弹窗（ref绑定实例 子传父）

class ModalComponent extends React.Component{
    state = {isVisible:false}
    show = ()=>{
        this.setState({isVisible:true});
    }
    hide = ()=>{
        this.setState({isVisible:false});
    }
    render(){
      return (
        <div style={{display:this.state.isVisible?'block':'none'}}>
            <h2>模态窗口</h2>
            <button onClick={this.hide}>关闭</button>
        </div>
      )
    }
}
class ParentComponent extends React.Component{
    modalRef = React.createRef()
    openModal = ()=>{
        this.modalRef.current.show();
    }
    render(){
        return (
            <div>
                <button onClick={this.openModal}>打开模态窗口</button>
                <ModalComponent ref={this.modalRef}/>
            </div>
        )
    }
}

Context传值

const LanguageContext = React.createContext();
const texts = {
    en:{
        greeting:'hello',
        farewell:'goodbye'
    },
    zh:{
        greeting:'你好',
        farewell:'再见'
    }
}
function LanguageProvider(props){
    const [language,setLanguage] = React.useState('en');
    return (
        <LanguageContext.Provider value={{language,setLanguage}}>
            {props.children}
        </LanguageContext.Provider>
    )
}
function SwitchLanguage(){
    const {setLanguage} = React.useContext(LanguageContext);
    return (
        <div>
            <button onClick={()=>setLanguage('en')}>English</button>
            <button onClick={()=>setLanguage('zh')}>中文</button>
        </div>
    )
}
function LocalizedText(){
    const {language} = React.useContext(LanguageContext);
    return (
        <div>
            <p>{texts[language].greeting}</p>
            <p>{texts[language].farewell}</p>
        </div>
    )
}
function App(){
    return (
        <LanguageProvider>
            <SwitchLanguage/>
            <LocalizedText/>
        </LanguageProvider>
    )
}

• 高阶组件改写上面的代码（HOC）

const LanguageContext = React.createContext();
const texts = {
    en:{
        greeting:'hello',
        farewell:'goodbye'
    },
    zh:{
        greeting:'你好',
        farewell:'再见'
    }
}
function LanguageProvider(props){
    const [language,setLanguage] = React.useState('en');
    return (
        <LanguageContext.Provider value={{language,setLanguage}}>
            {props.children}
        </LanguageContext.Provider>
    )
}
const withLanguage = (WrappedComponent)=>{
    return (props)=>{
        const {language,setLanguage} = React.useContext(LanguageContext);
        return <WrappedComponent language={language} setLanguage={setLanguage} {...props}/>
    }
}
const SwitchLanguage = withLanguage(({setLanguage})=>{
    return (
        <div>
            <button onClick={()=>setLanguage('en')}>English</button>
            <button onClick={()=>setLanguage('zh')}>中文</button>
        </div>
    )
})
const LocalizedText = withLanguage(({language})=>{
    return (
        <div>
            <p>{texts[language].greeting}</p>
            <p>{texts[language].farewell}</p>
        </div>
    )
})
function App(){
    return (
        <LanguageProvider>
            <SwitchLanguage/>
            <LocalizedText/>
        </LanguageProvider>
    )
}