- 学习资源推荐 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;
有状态组件
- 部分截图