P13:Redux进阶-Redux中的无状态组件的改写

Posted 2022-01-05 wgchen~

Redux 进阶

• 阐述
• 无状态组件的改写
• 总结

阐述

无状态组件其实就是一个函数，它不用再继承任何的类（class），当然如名字所一样，也不存在state（状态）。因为无状态组件其实就是一个函数（方法）,所以它的性能也比普通的React组件要好。

无状态组件的改写

把UI组件改成无状态组件可以提高程序性能，具体来看一下如何编写。

1、首先我们不在需要引入React中的 Component ，删除就好。

2、然后写一个TodoListUI函数,里边只返回JSX的部分就好，这步可以复制。

3、函数传递一个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的时候，实现分离是比较困难的，但是现在我们做项目，一定想着找个组件是否可以做成无状态组件。

如果能做成无状态组件就尽量作成无状态组件，毕竟性能要高很多。