React学习之高阶组件及Context API

高阶组件接收组件作为参数，返回新的组件

const EnhancedComponent = higherOrderComponent(WrappedComponent)

这种模式通常使用函数来实现，基本上是一个类工厂（是的，一个类工厂！）。

withTimer.js

import React,{Component} from 'react'

export default function withTimer(WrappedComponent){
    return class extends Component{
        state = {
            time:new Date(),
            timerID:0
        };
        componentDidMount(){
            this.timerID = setInterval(()=> this.tick(),1000);

        }
        tick(){
            this.setState({
                time:new Date()
            })
        }
        componentWillUnmount(){
            clearInterval(this.timerID)
        }

        render(){
            return 
        }
    }
}

App.js

import React,{Component} from 'react'
import withTimer from './withTimer'
class App extends Component{
    render(){
        return(
            

                

                hahha
                
                

                    {this.props.time.toLocaleString()}
                
            
        )
    }
}

export default withTimer(App)

Context API

当应用中多个组件需要使用全局状态时，这时可以使用Context API

新的 context API 主要由以下三部分组成:

• React.createContext 用于传递 初始值返回一个包含 provider 和 consumer 的对象

  const enStrings = {
      submit:'Submit',
      cancel:'Cancel'
  };
  
  const cnStrings = {
      submit:'提交',
      cancel:'取消'
  };
  
  const LocaleContext = React.createContext(enStrings);
  

• provide 函数使用 higher，并可以接收任何值

   class LocalProvider extends React.Component{
      state = {
          locale:cnStrings
      };
      toggleLocale = () => {
          const locale = this.state.locale === enStrings
                      ?cnStrings
                      :enStrings;
          this.setState({
              locale
          })            
      };
      render(){
          return(
              
                  
                      切换语言
                  
                  {this.props.children}
              
          )
      }
  }

• consume 函数在 provider 之后任何地方使用，并传递一个返回 JSX 的函数（这有点像 render prop 组件，但 consume 不是组件）。

  class LocaledButton extends React.Component{
      render(){
          return(
              
                  {
                      locale => (
                          
  
                              
                                  {locale.cancel}
                               
                              
                                  {locale.submit}
                              
                          
                      )
                  }
              
          )
      }
  }
  
  class App extends React.Component{
      render(){
          return(
              
  
              
                  
  
                      
  
                      
  
                      
                  
              
          
          )
      }
  }