八十、React中的容器组件和无状态组件

2020/11/20、 周五、今天又是奋斗的一天。

@Author：Runsen

React，也有了自己去构建一些应用的信心，那会是一种非常棒的感觉。

容器组件和无状态组件

React类组件是在JavaScript ES6时引入的，因为直到ES6才支持JS类。有时候它们也被称为React ES6类组件。

在上次的TodoList示例中，render函数是、渲染一个组件，而这个组件叫做UI组件。

新建TodoListUI.js，来做无状态组件

有状态组件其实就是一个类，也叫容器组件，而无状态组件是一个函数

// 有状态组件
class App extends Component {
    render() {
        return (......);
    }
}
export default App;

// 无状态组件
const person = (props) => {
    return (......)
}
export default person

从上面定义我们看到的明显区别是：有状态组件其实就是一个类，而无状态组件是一个函数。

从数据管理和存储来看:有状态组件可以使用State ,而无状态组件不能使用state，而是使用props来接收数据。

TodoListUI.js

import React from 'react'
import { Input,Button, List  } from 'antd';

// const无状态组件 父项子传参数 需要props 
const TodoListUI = (props)=> {
  return (
    <div>
        <div>
          <Input 
          value={props.inputValue}
          placeholder="Todo info" 
          style={{width:'300px',marginRight:'10px' }}
          onChange={props.handleInputChange}></Input>
          <Button type="primary"
          onClick={props.handleBtnClick}>提交</Button>
        </div>
        <List
        bordered
        style={{width:'300px',marginTop:'10px' }}
        dataSource={props.list}

    renderItem={(item, index) => (<List.Item onClick={()=>{props.handleItemDelete(index)}}>{item}</List.Item>)}
        />
      </div>
  )
    
}


export default TodoListUI;

使用JavaScript类编写的React Component有个类似于类构造器的方法，主要用于让React设置初始状态，或者绑定方法。还有必须的render方法用于返回JSX的输出。

TodoList.js

import React, {Component } from 'react'
import 'antd/dist/antd.css'
import store from './store';
import TodoListUi from './TodoListUI';
import { getInitList, getInputChangeAction, getAddItemAction, getDeleteItemAction } from './store/actionCreators'


class TodoList extends Component {
  constructor(props) {
    super(props)
    this.state = store.getState()
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleStoreChange = this.handleStoreChange.bind(this)
    this.handleBtnClick = this.handleBtnClick.bind(this)
    this.handleItemDelete = this.handleItemDelete.bind(this)
    store.subscribe(this.handleStoreChange)
    console.log( this.state)
  }

  render() {
    return  <TodoListUi
    inputValue={this.state.inputValue}
    handleInputChange={this.handleInputChange}
    handleBtnClick={this.handleBtnClick}
    handleItemDelete={this.handleItemDelete}
    list={this.state.list}
     />
  }
  
  componentDidMount() {
		const action = getInitList();
		store.dispatch(action);
	}

	handleInputChange(e) {
		const action = getInputChangeAction(e.target.value);
		store.dispatch(action);
	}

	handleStoreChange() {
		this.setState(store.getState());
	}

	handleBtnClick() {
		const action = getAddItemAction();
		store.dispatch(action);
	}

	handleItemDelete(index) {
		const action = getDeleteItemAction(index);
		store.dispatch(action);
	}
}

export default TodoList;

在实际开发中，建议更多的使用无状态组件，因为有状态组件带有生命周期函数，会在不同时刻触发更新。所以更多的使用无状态组件可以提高整体的渲染性能。