容器组件和无状态组件

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><Listborderedstyle={{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  <TodoListUiinputValue={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;

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

八十、React中的容器组件和无状态组件相关推荐

有状态组件和无状态组件
所谓的有状态组件:指的是用类创建的组件. 所谓的无状态组件:指的是用函数创建的组件. 通过这个名称,可以发现函数组件与类组件的区别就是在状态上,那么状态指的就是数据. 所以说函数组件,没有自己的状态, ...
[react] 描述下在react中无状态组件和有状态组件的区别是什么？
[react] 描述下在react中无状态组件和有状态组件的区别是什么? 1,无状态组件主要用来定义模板,接收来自父组件props传递过来的数据,使用{props.xxx}的表达式把props塞到模板 ...
区分有状态和无状态组件
有状态组件和无状态组件是 React 中两种不同的组件类型,它们在处理数据和实现逻辑的方式上有所不同. 有状态组件(Stateful Components): 有状态组件是指具有内部状态(state) ...
react--无状态组件和有状态组件
学习资源推荐 https://blog.csdn.net/qq_42813491/article/details/90213353 概念 react中组件根据自身状态可分为无状态组件或叫函数组件,另一 ...
React学习(十)-React中编写样式CSS(styled-components)
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 VX-ID:suibichuanji 点 ...
[react] 在react中无状态组件有什么运用场景
[react] 在react中无状态组件有什么运用场景适用于逻辑简单的纯展示的场景,如资料卡片等个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...
Blazor中的无状态组件
声明:本文将RenderFragment称之为组件DOM树或者是组件DOM节点,将*.razor称之为组件. 1. 什么是无状态组件如果了解React,那就应该清楚,React中存在着一种组件,它只 ...
class根据状态 vue_搞懂并学会运用 Vue 中的无状态组件
啥是应用程序状态,为什么咱们需要它? 状态管理通常在较小的项目并不需要,但是当涉及到更大的范围时,如企业级的应用大部分需要它了.简单的说,状态是一个包含应用程序使用的最新值的对象.但是,如果咱们从结构 ...
容器化与无状态微服务等
写在前面: 本来不想太多转载东西,但这篇文章写的极有章法,把一些核心的东西,来龙去脉表达的很清晰,可见作者是个一线的优秀技术人员.特转到此处,谢谢作者.. ====================== ...

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

容器组件和无状态组件

八十、React中的容器组件和无状态组件相关推荐

最新文章

热门文章