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

举报
毛利 发表于 2021/07/15 03:54:13 2021/07/15
2.2k+ 0 0
【摘要】 2020/11/20、 周五、今天又是奋斗的一天。 @Author:Runsen React,也有了自己去构建一些应用的信心,那会是一种非常棒的感觉。 容器组件和无状态组件 React类组件是在JavaScript ES6时引入的,因为直到ES6才支持JS类。有时候它们也被称为React ES6类组件。 在上次的TodoList示例中,render函数是...
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;
  
 

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

文章来源: maoli.blog.csdn.net,作者:刘润森!,版权归原作者所有,如需转载,请联系作者。

原文链接:maoli.blog.csdn.net/article/details/109880113

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。