开始使用React Hooks

Hooks 是React16.8最新引入的特性。使用Hooks可以在函数式组件中管理state。 Hooks 带来的好处可以让更简洁的让UI与状态分离,使代码更加清晰。 说明 使用Hooks的前提是在函数式组件中。所以不能再使用React类组件的几个生命周期函数(需要通过useEffect来实现) 开始 前端项目万物基于TODO APP 😂 , 接一下使用Hooks来创建一个TODO APP。 useState useState 接受一个初始化参数, 返回一个值和set方法 todo 组件: const todo = props => { const [todoName, setTodoName] = useState('') const [todoList, setTodoList] = useState([]) const inputChangeHandler = event => { setTodoName(event.target.value) } const todoAddHandler = () => { setTodoList(todoList.concat(todoName)) } return ( <React.Fragment> <input type="text" placeholder="Todo" value={todoName} onChange={inputChangeHandler} /> <button type="button" onClick={todoAddHandler}>Add</button> <ul> {todoList.map((item, index) => ( <li key={index}>item</li> ))} </ul> </React....

March 12, 2019 · 3 min