React初识记录（十一）持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情

Fragments

React中一个常见模式是一个组件返回多个元素。Fragments允许将子列表分组，而无需向DOM添加额外节点

render(){
    <React.Fragment>
       child.something
    </React.Fragment>
}

也可以使用它的短语法来声明Fragments,类似于空标签

class A extends React.Component {
    render() {
        <>
         <td>aaa</td>
         <td>bbb</td>
        </>
    }
}

这种短语法除了不支持key或属性外，和其他元素一样

实际用法

Fragment常用的业务场景是组件返回一个子元素列表

class A extends React.Component {
    render(){
        return (
            <table>
              <tr>
                  <A />
              </tr>
            </table>
        )
    }
}

需要返回多个td元素以使渲染的HTML有效。如果在的render()中使用了父div，则生成的HTML将无效。

 class A extends React.Component {
     render() {
         return (
             <div>
               <td>Hi</td>
             </div>
         )
     }
 
 }

可以通过Fragments来解决这个问题

 class A extends React.Component {
     render() {
         return(
             <React.Fragment>
               <td>aaa</td>
               <td>bbb</td>
             </React.Fragment>
         )
     }
 }

带key的Fragments 使用显示<React.Fragment>语法声明的片段可能具有key，一个使用场景是将一个集合映射到一个Fragments数组

function A(props){
    return (
        <dl>
          {props.items.map(item=>(
              <React.Fragment>
               <dt>{item.term}</dt>
               <dd>{item.description}</dd>
              </React.Fragment>
          )}
        </dl>
    )
}

高阶组件

高阶组件（HOC)是React中用于复用组件逻辑的一种高级技巧。HOC自身不是React API的一部分，它是一种基于React的组合特性而形成的设计模式。总的来说，高阶组件是参数为组件，返回值为新组件的函数

const EnComponent = higherOrderComponent(WrappedComponent)

组件是将props转换为UI，而高阶组件是将组件转换为另一个组件

HOC在React的第三方库很常见，例如Redux的connect和Relay的createFragmentContainer

使用HOC解决横切关注点问题

组件是React中代码复用的基本单元，但是某些模式并不适合传统组件。