组件跨层级通信 - Context

context参考

范例：模拟redux存放全局状态，在组件间共享

  1. // 组件跨层级通信
  2. import React, { Component } from 'react'
  4. // 1、创建上下文对象
  5. const Context = React.createContext()
  7. // 2、获取 Provider 和  Consumer 
  8. const { Provider, Consumer } = Context
  10. // Child显示计数器，并能修改它，多个Child之间需要共享数据
  11. function Child(props) {
  12.   return (
  13.     <div onClick={ () => props.add() }>{props.counter}</div>
  14.   )
  15. }
  17. export default class ContextTest extends Component {
  18.     // state 是要传递的数据
  19.   state = {
  20.     counter: 0
  21.   }
  23.     // add 方法可以修改状态
  24.   add = () => {
  25.     this.setState({ counter: this.state.counter + 1 })
  26.   }
  28.   render() {
  29.     return (
  30.       <Provider value={{ counter: this.state.counter, add: this.add }}>
  31.         <Consumer>{ value => <Child {...value}></Child> }</Consumer>
  32.         <Consumer>{ value => <Child {...value}></Child> }</Consumer>
  33.         <Consumer>{ value => <Child {...value}></Child> }</Consumer>
  34.       </Provider>
  35.     )
  36.   }
  37. }

高阶组件-HOC

HOC参考
高阶组件：高阶组件是一个工厂函数，它接收一个组件并返回另一个组件
范例：为展示组件添加获取数据的能力

  1. import React from 'react'
  3. // Lesson 保证功能单一，它不关心数据来源，只负责显示
  4. function Lesson(props) {
  5.   return (
  6.     <div>
  7.       {props.stage} - {props.title}
  8.     </div>
  9.   )
  10. }
  12. // 模拟数据
  13. const lessons = [
  14.   {
  15.     stage: '高中',
  16.     title: '数学'
  17.   },
  18.   {
  19.     stage: '初中',
  20.     title: '英语'
  21.   },
  22.   {
  23.     stage: '小学',
  24.     title: '语文'
  25.   }
  26. ]
  29. // 定义高阶组件 withContent
  30. // 包装后的组件可以根据传入的参数显示组件
  32. // ES5 写法
  33. // function withContent (Comp) {
  34. //   return function (props) {
  35. //     const content = lessons[props.idx]
  36. //     return <Comp {...content}/>
  37. //   }
  38. // }
  40. // ES6 写法
  41. const withContent = Comp => props => {
  42.   const content = lessons[props.idx]
  43.   return <Comp {...content}/>
  44. }
  46. const LessonWithContent = withContent(Lesson)
  48. export default function HOCTest() {
  49.   return (
  50.     <div>
  51.       { [0, 0, 0].map((item, idx) => <LessonWithContent key={idx} idx={idx} />)}
  52.     </div>
  53.   )
  54. }

范例：改造前面案例使上下文使用更优雅

这里和前面的范例有所不同，withConsumer 高阶组件工厂，根据配置返回一个高阶组件，，大家想一想 react-redux 里面的 connect 函数是不是和这个很类似。

  1. import React, { Component } from 'react'
  3. // 1、创建上下文对象
  4. const Context = React.createContext()
  6. // 2、获取 Provider 和  Consumer 
  7. const { Provider, Consumer } = Context
  9. function Child(props) {
  10.   return (
  11.     <div onClick={ () => props.add() }>{props.counter}</div>
  12.   )
  13. }
  16. // withConsumer 高阶组件工厂，根据配置返回一个高阶组件
  17. const withConsumer = Consumer => {
  18.   return Comp => props => {
  19.     return <Consumer>{ value => <Comp {...value}/>}</Consumer>
  20.   }
  21. }
  23. let ChildWithConsumer = withConsumer(Consumer)(Child)
  25. export default class ContextTest extends Component {
  26.   state = {
  27.     counter: 0
  28.   }
  30.   add = () => {
  31.     this.setState({ counter: this.state.counter + 1 })
  32.   }
  34.   render() {
  35.     return (
  36.       <Provider value={{ counter: this.state.counter, add: this.add }}>
  37.         <ChildWithConsumer />
  38.         <ChildWithConsumer />
  39.         <ChildWithConsumer />
  40.       </Provider>
  41.     )
  42.   }
  43. }

链式调用

  1. // withLog高阶组件，在组件挂载时输出日志
  2. const withLog = Comp => {
  3.   return class extends React.Component {
  4.     componentDidMount () {
  5.       console.log('componentDidMount', this.props)
  6.     }
  7.     render () {
  8.       return <Comp { ...this.props }/>
  9.     }
  10.   }
  11. }
  13. // 高阶组件的链式调用（层级过多的话，代码可读性会很差，可以使用装饰器语法）
  14. const LessonWithContent = withLog(withContent(Lesson))

装饰器写法

CRA项目中默认不支持js代码使用装饰器语法，需要安装并配置 @babel/plugin-proposal-decorators 之后才能使用：

  1. // package.json
  2. "babel": {
  3.   "plugins": [
  4.     [
  5.       "@babel/plugin-proposal-decorators",
  6.       {
  7.         "legacy": true
  8.       }
  9.     ]
  10.   ],
  11.   "presets": [
  12.     "react-app"
  13.   ]
  14. },

范例：通过装饰器来使用高阶组件

  1. // 装饰器
  2. import React, { Component } from 'react'
  4. // 模拟数据
  5. const lessons = [
  6.   {
  7.     stage: '高中',
  8.     title: '数学'
  9.   },
  10.   {
  11.     stage: '初中',
  12.     title: '英语'
  13.   },
  14.   {
  15.     stage: '小学',
  16.     title: '语文'
  17.   }
  18. ]
  20. // 定义高阶组件 withContent
  21. // 包装后的组件可以根据传入的参数显示组件
  22. const withContent = Comp => props => {
  23.   const content = lessons[props.idx]
  24.   return <Comp {...content}/>
  25. }
  27. // withLog高阶组件，在组件挂载时输出日志
  28. const withLog = Comp => {
  29.   return class extends React.Component {
  30.     componentDidMount () {
  31.       console.log('componentDidMount', this.props)
  32.     }
  33.     render () {
  34.       return <Comp { ...this.props }/>
  35.     }
  36.   }
  37. }
  39. // 装饰器写法 @withLog @withContent 装饰器语法只能用在 class 组件上
  40. @withLog
  41. @withContent
  42. class Lesson extends Component {
  43.   render() {
  44.     return (
  45.       <div>
  46.         {this.props.stage} - {this.props.title}
  47.       </div>
  48.     )
  49.   }
  50. }
  52. export default function DecoraterTest() {
  53.   return (
  54.     <div>
  55.       { [0, 0, 0].map((item, idx) => <Lesson key={idx} idx={idx} />)}
  56.     </div>
  57.   )
  58. }

组件复合 - Composition

组件复合：类似于 Vue 的插槽，具体内容由外部传入

普通插槽

范例：Dialog组件负责展示，内容从外部传入即可，components/Composition.js**

  1. // 组件复合：类似于 vue 的插槽，具体内容由外部传入
  2. import React, { Component } from 'react'
  4. function Dialog(props) {
  5.   // props.children：children 是一个合法的 js 表达式
  6.   return (
  7.     <div style={{border: '1px solid #000'}}>
  8.       { props.children }
  9.     </div>
  11.   )
  12. }
  14. export default class Composition extends Component {
  15.   render() {
  16.     return (
  17.       <div>
  18.         <Dialog>
  19.           <h1>组件复合</h1>
  20.           <p>通过组件符合去自定义组件内容</p>
  21.         </Dialog>
  22.       </div>
  23.     )
  24.   }
  25. }

具名插槽

范例：传个对象进去，key表示具名插槽

  1. // 组件复合：类似于 vue 的插槽，具体内容由外部传入
  2. import React, { Component } from 'react'
  4. function Dialog(props) {
  5.   // props.children：children 是一个合法的 js 表达式
  6.   return (
  7.     <div style={{border: '1px solid #000'}}>
  8.       { props.children.def }
  9.       <div>
  10.         { props.children.footer }
  11.       </div>
  12.     </div>
  14.   )
  15. }
  17. export default class Composition extends Component {
  18.   render() {
  19.     return (
  20.       <div>
  21.         <Dialog>
  22.           {
  23.             {
  24.              def: (
  25.                 // React.Fragment的速记语法<></>，仅在最新版本（和Babel 7+）中受支持
  26.                 <>
  27.                   <h1>组件复合</h1>
  28.                   <p>通过组件符合去自定义组件内容</p>
  29.                 </>
  30.               ),
  31.               footer: (
  32.                 <button onClick={ () => alert('组件复合') }>确定</button>
  33.               )
  34.             }
  35.           }
  36.         </Dialog>
  37.       </div>
  38.     )
  39.   }
  40. }

作用域插槽

范例：传个函数进去，实现作用于插槽的功能

  1. // 组件复合进阶用法：实现作用域插槽
  2. import React, { Component } from 'react'
  4. function Dialog(props) {
  5.   const message = {
  6.     foo: { title: 'foo', content: 'foo~' },
  7.     bar: { title: 'bar', content: 'bar~' }
  8.   }
  10.   const { def, footer } = props.children(message[props.msg])
  12.   return (
  13.     <div style={{border: '1px solid #000'}}>
  14.       { def }
  15.       <div>
  16.         { footer }
  17.       </div>
  18.     </div>
  19.   )
  20. }
  22. export default class HComposition extends Component {
  23.   render() {
  24.     return (
  25.       <div>
  26.         <Dialog msg="foo">
  27.           {
  28.             ({title, content}) => (
  29.               {
  30.                 def: (
  31.                   <>
  32.                     <h1>{title}</h1>
  33.                     <p>{content}</p>
  34.                   </>
  35.                 ),
  36.                 footer: (
  37.                   <button onClick={ () => alert('组件复合') }>确定</button>
  38.                 )
  39.               }
  40.             )
  41.           }
  42.         </Dialog>
  43.       </div>
  44.     )
  45.   }
  46. }

实现修改 children

如果 props.children 是 jsx，此时它是不能修改的。
范例：实现 RadioGroup 和 Radio 组件，可通过 RadioGroup 设置 Radio 的 name

  1. // 组件复合进阶用法：实现修改 children
  2. import React, { Component } from 'react'
  4. function RadioGroup (props) {
  5.   // 如果 props.children是jsx，不能直接修改它
  6.     return (
  7.       <div>
  8.         {
  9.           React.Children.map(props.children, radio => {
  10.             // 要修改虚拟DOM（jsx编译之后的结果），只能克隆后重新设置属性，不能直接修改
  11.             // 参数1：克隆对象
  12.             // 参数2：设置的属性
  13.             return React.cloneElement(radio, { name: props.name })
  14.           })
  15.           // props.children.map(radio => {
  16.           //   return React.cloneElement(radio, { name: props.name })
  17.           // })
  18.         }
  19.       </div>
  20.     )
  21. }
  23. function Radio ({children, ...rest}) {
  24.   return (
  25.     <label>
  26.       <input type="radio" {...rest} />
  27.       { children }
  28.     </label>
  29.   )
  30. }
  32. export default class HComposition extends Component {
  33.   render() {
  34.     return (
  35.       <div>
  36.         <RadioGroup name="mvvm">
  37.           <Radio value="vue">vue</Radio>
  38.           <Radio value="react">react</Radio>
  39.           <Radio value="ng">angular</Radio>
  40.         </RadioGroup>
  41.       </div>
  42.     )
  43.   }
  44. }