react component design mode

A stateful components, stateless component

• Stateful component: Yes state, manipulation of the data
• Stateless components: no state, only responsible for rendering.

　　  Stateless components wording:

　　  1, pure function, without management state, but renders duplicate data

　　  2, PureComponent, data can be relatively shallow, simple repetition does not render data

　　  3, React.memo then react v16.6 (), use the shouldComponentUpdate, nor does it require us to write a class, it also reflects React to gradually advance to a fully functional programming

 

Two, HOC (high-order components)

　　Essence is a higher-order functions, but to the Senate to become a component from a function.

　　A receiving component, returns a new component as a result, the package may be added in the course of new features on the incoming components.

　　important point:

　　1, the high-order component can not go as modified components, the high-order component parameters must be a pure function, there should not be any side effects.

      2, the result of higher-order component returns must be a new React components, the new JSX will certainly be part of the assembly containing the component as a parameter.

　　3, high-order components generally need to pass their own props hands of the component passed as a parameter.

 

Three, the render props

　　 The so-called render props, refers to the components of props to make React support function in this mode. Because, as a function of the incoming props it is often used to render a portion of the interface, so this mode is called the render props

　　

1 const RenderAll = (props) => { 
2     return( 
3         <React.Fragment> 
4             {props.children(props)} 
5         </React.Fragment> ); 
6 };
7 
8 <RenderAll> {() => <h1>hello world</h1>} </RenderAll>

 

Fourth, the provider model

　　Address cross multi-stage component is passed props problems, 16.3 previously used Context, followed by Provider and Consumer

Although this model is called the "provider model", but in fact there are two roles, one called "provider" (Provider), another called "consumer" (Consumer), these two roles are React components. The "Provider" by comparison, living on location in the component tree, "consumer" in on the lower position. For example, react-redux of Provider wrap our App, store it on can be shared by all components within the App, which is to use the provider model.

 

Fifth, the combination of components

　　A combination of component model to solve a class of problems is this: the parent component you want to pass some information to sub-assemblies, however, if the props passed and it looks very troublesome. For example, for example, a group of Tab, select a TabItem, followed tab remaining state changes, of course, can be used or multiple pass context props treated, but with the combination of components will be easier.

1 <Tabs> 
2     <TabItem>One</TabItem> 
3     <TabItem>Two</TabItem> 
4     <TabItem>Three</TabItem> 
5 </Tabs>

 1 const TabItem = (props) => { 
 2     const {active, onClick} = props; 
 3     const tabStyle = { 
 4         'max-width': '150px’, 
 5         color: active ? 'red' : 'green’, 
 6         border: active ? '1px red solid' : '0px’, 
 7     }; 
 8     return ( <h1 style={tabStyle} onClick={onClick}>   
 9              {props.children} 
10     </h1> ); 
11 };

. 1  class Tabs the extends React.Component { 
 2      State = {activeIndex: 0 } 
 . 3      the render () { 
 . 4      const = newChildren React.Children.map ( the this .props.children,     
 . 5 (Child, index) => { 
 . 6      IF (Child .Type) { 
　　　　　　　//
        
       copy subassembly Tabs and tampering (add new logic), and then returns the new subassembly out
 . 7          return React.cloneElement (child, { 
 . 8              Active: the this .state.activeIndex === index , 
 . 9              the onClick: () => the this .setState ({activeIndex: index})         
 10         }); 
11     } else {
12      return child; 
13     } 
14 }); 
15     return ( <Fragment> {newChildren} </Fragment> ); } 
16 }