React组件模式-有状态组件vs无状态组件-容器组件vs展示组件-高阶组件(1)

React组件模式-有状态组件vs无状态组件-容器组件vs展示组件-高阶组件

• 有状态stateful组件和无状态stateless组件

  ---

  就像有状态和无状态Web服务一样，React 组件也可以在应用程序使用期间保持和操作状态stateful ， 或者只是一个简单的组件，它接受输入 props 并返回要显示的内容stateless。

  • 一个简单的无状态组件，仅依赖于props(属性)，这也称为函数式组件

    Button.js

    import React from 'react'
    const Button = (props) =>  {
      return (
        <div >
          <button onClick={props.onClick}>
          点击我
          </button>
          <span>{props.text}</span>
        </div>
      )
     }
    export default  Button
    

  • 有状态组件，在有状态组件里面使用了无状态组件

    ButtonCounter.js

    import React from 'react'
    import Button from './Button'
    
    
    class ButtonCounter extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          clicks: 0
        }
      }
    
      handelClick = () => {
        let {clicks} = {...this.state}
        
        this.setState({
          clicks: clicks +1
        })
    
      }
    
      render () {
        return (
          <div>
            <Button
              onClick={this.handelClick}
              text={this.state.clicks}
            ></Button>
            <div>huyhyubgyu</div>
          </div>
          
          
        )
      }
    }
    export default ButtonCounter
    

    总结

    有状态组件的constructor包含一个组件 state(状态) ，而无状态是一个简单的组件，通过 props(属性) 渲染文本。有状态组件和无状态组件的划分看起来非常简单，但可以使 无状态组件具有高度可重用性。

• 容器Container组件和展示Presentational组件

  在处理外部数据时，我们可以将组件划分为这两个新类别。容器(Container) 组件负责访问数据，它常常是超出了React范畴的，例如使用 Redux或 Relay进行了绑定。对比而言，虽然 展示(Presentational) 组件与应用程序的其余部分没有依赖关系，它只取决于其自身的 state(状态) 或 接收到的 props(属性)

  • 展示组件

    import React from 'react'
    // 展示组件
    const UserList = (props) => {
      return (
        <ul>
          {props.users.map((item, index) => {
            return (
              <li key={index}>{item.name}</li>
            )
          })}
        </ul>
      )
    }
    export default UserList
      
    

  • 容器组价

    import React from 'react'
    import UserList from './UserList'
    const data = [
      {
        name: '叶俊宽',
        id: 0
      },
      {
        name: '华晓雯',
        id: 1
      },
      {
        name: '小敏',
        id: 2
      },
      {
        name: '小花',
        id: 3
      },
      {
        name: '小李',
        id: 4
      },
      {
        name: '小妞',
        id: 5
      },
    ]
    // 容器组件
    export default class UserListContainer extends React.Component {
      constructor() {
        super()
        this.state = {
          data
        }
      }
    
      componentDidMount() {
        this.setState({
          data
        })
      }
    
      render() {
        const {data} = {...this.state}
        return (
          <UserList users={data}></UserList>
        )
      }
    }
    
    

    将数据获取和渲染分开，并使UserList可以重复使用