react--无状态组件和有状态组件

• 学习资源推荐 https://blog.csdn.net/qq_42813491/article/details/90213353

概念

react中组件根据自身状态可分为无状态组件或叫函数组件，另一种叫做有状态组件或者叫类组件。无状态组件接受一个props参数，主要用来渲染模板，内部没有复杂d的业务逻辑，与之相反，有状态组件是用class关键字创建，内部主要的东西就是繁杂的业务逻辑。

示例

无状态组件

import React, { Fragment } from 'react';
import TodoItem from "./TodoItem"

const TodoListUI = (props) => {
    return (
        <Fragment>
            <div>
                <input
                    onKeyUp={props.enterAdd}
                    type="text"
                    value={props.inputValue}
                    onChange={props.changeInputValue}
                />
                <button onClick={props.addTodoItem} > 添加 </button>
            </div>
            <ul>
                {
                    props.list.map((item, index) => {
                        return <TodoItem
                            todo_item={item}
                            key={item}
                            index={index}
                            delTodoItem={props.delTodoItem.bind(this)}
                        />
                    })
                }
            </ul>
        </Fragment>
    );
}


export default TodoListUI;

有状态组件

• 部分截图