react组件设计模式

一、有状态组件、无状态组件

• 有状态组件：有state，对数据进行操作
• 无状态组件：无state，只负责渲染。

　　  无状态组件写法：

　　  1、纯函数，不需管理state,但会渲染重复的数据

　　  2、使用PureComponent，还能进行数据浅比较，简单的重复数据不会渲染

　　  3、react v16.6 之后有React.memo()，利用了 shouldComponentUpdate，也不要求我们写一个 class，这也体现出 React 逐步向完全函数式编程前进

 

二、HOC（高阶组件）

　　实质就是一个高阶函数，只是入参从一个函数变成一个组件。

　　接收一个组件，返回一个新的组件作为结果，在过程中可以对传入的组件增加包装一些新的功能。

　　注意点：

　　1、高阶组件不能去修改作为参数的组件，高阶组件必须是一个纯函数，不应该有任何副作用。

      2、高阶组件返回的结果必须是一个新的 React 组件，这个新的组件的 JSX 部分肯定会包含作为参数的组件。

　　3、高阶组件一般需要把传给自己的 props 转手传递给作为参数的组件。

 

三、 render props

　　 所谓 render props，指的是让 React 组件的 props 支持函数这种模式。因为作为 props 传入的函数往往被用来渲染一部分界面，所以这种模式被称为 render props

　　

const RenderAll = (props) => { 
    return( 
        <React.Fragment> 
            {props.children(props)} 
        </React.Fragment> ); 
};

<RenderAll> {() => <h1>hello world</h1>} </RenderAll>

四、提供者模式

　　解决跨多级组件传递props问题，16.3以前使用Context，之后用Provider和Consumer

虽然这个模式叫做“提供者模式”，但是其实有两个角色，一个叫“提供者”（Provider），另一个叫“消费者”（Consumer），这两个角色都是 React 组件。其中“提供者”在组件树上居于比较靠上的位置，“消费者”处于靠下的位置。比如react-redux的Provider包住了我们的App，其上的store就能被App内的所有组件共享，这就是提供者模式的运用。

 

五、组合组件

　　组合组件模式要解决的是这样一类问题：父组件想要传递一些信息给子组件，但是，如果用 props 传递又显得十分麻烦。举例比如，在一组Tab中，选中一个tabItem,其余的tab也跟着状态变化，当然可以用context或者多次传递props来处理，但是用组合组件会更简单。

<Tabs> 
    <TabItem>One</TabItem> 
    <TabItem>Two</TabItem> 
    <TabItem>Three</TabItem> 
</Tabs>

const TabItem = (props) => { 
    const {active, onClick} = props; 
    const tabStyle = { 
        'max-width': '150px’, 
        color: active ? 'red' : 'green’, 
        border: active ? '1px red solid' : '0px’, 
    }; 
    return ( <h1 style={tabStyle} onClick={onClick}>   
             {props.children} 
    </h1> ); 
};

class Tabs extends React.Component { 
    state = { activeIndex: 0 } 
    render() { 
    const newChildren =React.Children.map(this.props.children,     
(child, index) => { 
    if (child.type) { 
　　　　　　　// 拷贝Tabs的子组件并进行篡改(添加新的逻辑)，然后将新的子组件返回出去
        return React.cloneElement(child, { 
            active: this.state.activeIndex === index, 
            onClick: () => this.setState({activeIndex: index})         
        }); 
    } else {
     return child; 
    } 
}); 
    return ( <Fragment> {newChildren} </Fragment> ); } 
}