标签：ons this return tst containe 不同 有一个 todo element
Hook是React16.8新加特性
当state是数组的时候，要怎么更新呢？
我们先直观的看一个代码示例：
import React, { useState } from "react";
import ReactDOM from "react-dom";
function Example() {
const [todos, setTodos] = useState([{ text: "Learn Hooks" }]);
const addItems = () => {
setTodos([
...todos,
{
text: "Learn Hooks"
}
]);
};
return (
<div>
<ul>
{todos.map((item, index) => {
return (
<li key={index}>
{item.text}-{index}
</li>
);
})}
</ul>
<button onClick={addItems}>Add Item</button>
</div>
);
}
ReactDOM.render(<Example />, document.getElementById("container"));
这个state的更新函数
setTodos
没有把新值与旧值合并，而是用新的数组覆盖，这不同于class类里面的this.setState的方式
为了向数组中添加新项，我使用了ES6中的扩展运算符(...)拷贝已存在的项到新的数组，并且把新项插入到最后。
还有一个需要注意一点，这个例子中使用const和箭头函数，其实使用普通函数也可以，普通函数与箭头函数最大的区别是它们处理this不同，但是这里没有看见this,因为没有使用class。
function addItems() { setTodos([ ...todos, { text: "Learn Hooks" } ]); }
标签：ons this return tst containe 不同 有一个 todo element
原文地址：https://www.cnblogs.com/hanlinbaiyu/p/12120589.html
