本文主要是介绍ReactHooks：渲染与useState，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
渲染和提交
组件显示到屏幕之前，必须被 React 渲染。主要需要经历以下三个步骤：
步骤1： 触发一次渲染
有两种原因会导致组件的渲染：
- 组件的初次渲染
- 组件（或其父组件）的状态发生改变而触发重新渲染
当应用启动时，会触发初次渲染。一旦组件被初次渲染，就可以调用 set 函数（useState）更新其状态来触发之后的渲染。更新组件的状态会自动将一次渲染送入队列。
可以把这种情况想象成餐厅客人在第一次下单之后又点了茶、点心和其他东西，每次点单到厨房都相当于触发一次渲染。
步骤2：React 渲染组件
在触发一次渲染后，React 会调用组件来确定在屏幕上显示的内容。
这个过程是递归的，如果更新后的组件会返回某个另外的组件（子组件），React 会继续渲染这个子组件。以此类推，这个过程会持续下去，直到没有更多的嵌套组件并且 React 确切知道哪些东西应该显示到屏幕上为止。
如果更新的组件在树中的位置非常高，默认会渲染更新组件中所有的嵌套组件，这种行为可能会影响性能。
在渲染组件的过程中，React 会将更新后的虚拟 DOM 与旧的虚拟 DOM 进行对比，通过 diff 算法找出需要更新的节点，从而在提交阶段应用最少的必要操作来操作真实 DOM，提交性能。
- 真实DOM：浏览器在解析HTML文档时，会将每个标签元素抽象成DOM节点，按照标签元素层次分明的结构，将HTML文档构建成一棵DOM树。
- 虚拟DOM：虚拟DOM本质上是一个js对象，通过对象来表示真实的DOM结构。tag用来描述标签，props用来描述属性，children用来表示嵌套的层级关系。在状态变化时，会重新生成一个新的虚拟DOM，通过将新旧两个虚拟DOM树进行比较，只将差异的节点应用在真实DOM树上。
步骤3：React 把更新提交到 DOM 上
在渲染组件之后，React 仅在渲染之间存在差异时才会更改 DOM 节点。在渲染完成并且 React 更新 DOM 之后，浏览器就会重新绘制屏幕。
state
想要页面对输入做出反应，需要设置 state 触发重新渲染。
state 如同一张快照，React 在调用（渲染）组件时，组件会在其 JSX 中返回一张包含一整套新的 props 和事件处理函数的 UI 快照，其中所有的值都是根据这一次渲染中 state 中的值计算出来的。
一个 state 变量的值永远不会在一次渲染的内部发生变化， 即使其事件处理函数的代码是异步的。
const [count, setCount] = useState(0);const onClick = () => {setCount(count + 1);setCount(count + 1);setTimeout(() => {alert(count);}, 3000);
}
// 最终结果：点击按钮之后，页面触发重新渲染 count会变为 1，3秒后 alert显示内容为 0
在这次渲染的过程中，state 变量 count 的值为 0，使用替代法可以将事件处理函数变成下面这样：
setCount(0 + 1);
setCount(0 + 1);
setTimeout(() => { alert(0) }, 3000);
除此之外，state 变量还有一个重要的特性：批处理
React 会将一系列的 state 更新加入队列，等到事件处理函数中的所有代码都运行之后再遍历队列，进行 state 更新。这使得可以一次更新多个 state 变量而不会触发太多次的重新渲染。
const [count, setCount] = useState(0);
setCount(count + 1);
setCount(count + 1); // 1
// setCount(0 + 1);
// setCount(0 + 1);
setCount(count + 1);
setCount(count + 5); // 5
// setCount(0 + 1);
// setCount(0 + 5);
setCount(count => count + 1);
setCount(count => count + 1); // 2
// setCount(0 => 0 + 1);
// setCount(1 => 1 + 1);
setCount(count => count + 1);
setCount(count + 5); // 5
// setCount(0 => 0 + 1);
// setCount(0 + 5);
setCount(count + 1);
setCount(count => count + 5); // 6
// setCount(0 + 1);
// setCount(1 => 1 + 5);
state 更新
state 中可以存储任意类型的 js 值。对于基础数据类型，可以通过直接替换它们的值来触发一次渲染。对于对象或数组，则需要创建一个新的对象或数组并将其传递给 state 的设置函数。
对象：使用 … 展开语法进行复制
const [person, setPerson] = useState({name: 'Niki de Saint Phalle',artwork: {title: 'Blue Nana',city: 'Hamburg',image: 'https://i.imgur.com/Sd1AgUOm.jpg',}
});setPerson({...person, // 复制其它字段的数据 artwork: { // 替换 artwork 字段 ...person.artwork, // 复制之前 person.artwork 中的数据city: 'New Delhi' // 但是将 city 的值替换为 New Delhi！}
});
数组
const [ products, setProducts ] = useState([{ name: 'Baklava', count: 1},{ name: 'Cheese', count: 5},
])
新增：… 数组展开
setProducts([ ...products, { name: 'Spaghetti', count: 2}
]); // 可以加在开头或末尾
插入中间：slice
setProducts([...products.slice(0, 1),{ name: 'Spaghetti', count: 2},...products.slice(1),
])
删除：filter
setProducts(products.filter(p => p.count <= 1);
)
更新：map
setProducts(products.map(p => {if (p.name === 'Cheese'){return { ...p, count: p.count + 1};}return p;})
)
排序：先拷贝一份
const newProducts = [ ...products];
newProducts.sort((a, b) => b.count - a.count);
setProducts(newProducts);
这篇关于ReactHooks：渲染与useState的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
