P13:Redux进阶-Redux中的无状态组件的改写
无状态组件其实就是一个函数,它不用再继承任何的类(class),当然如名字所一样,也不存在state
(状态)。因为无状态组件其实就是一个函数(方法),所以它的性能也比普通的React
组件要好。
无状态组件的改写
把 UI 组件改成无状态组件可以提高程序性能,具体来看一下如何编写。
- 首先我们不在需要引入 React 中的
{ Component }
,删除就好。 - 然后些一个
TodoListUI
函数,里边只返回JSX
的部分就好,这步可以复制。 - 函数传递一个
props
参数,之后修改里边的所有props
,去掉this
。
这里给出最后修改好以后的无状态组件代码,这样的效率要高于以前写的普通react
组件。
import React from 'react'; import 'antd/dist/antd.css' import { Input , Button , List } from 'antd' const TodoListUi = (props)=>{ return( <div style={{margin:'10px'}}> <div> <Input style={{ width:'250px', marginRight:'10px'}} onChange={props.changeInputValue} value={props.inputValue} /> <Button type="primary" onClick={props.clickBtn} >增加</Button> </div> <div style={{margin:'10px',width:'300px'}}> <List bordered dataSource={props.list} renderItem={ (item,index)=>( <List.Item onClick={()=>{props.deleteItem(index)}}> {item} </List.Item> ) } /> </div> </div> ) } export default TodoListUi;
总结
本文主要学习了React
中的无状态组件,如果是以前没有Redux
的时候,实现分离是比较困难的,但是现在我们做项目,一定想着找个组件是否可以做成无状态组件。如果能做成无状态组件就尽量作成无状态组件,毕竟性能要高很多。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P13:Redux进阶-Redux中的无状态组件的改写
码云笔记 » P13:Redux进阶-Redux中的无状态组件的改写