React随笔

react中setState是同步还是异步

• 在react自身的合成事件和生命周期函数中是"异步"的。这里的"异步"指的是"setState"之后"this.state"并不会马上更新，但是还是在"setState"的函数方式中获取到最新的值。
• 在setTimeout和dom自身的事件中是同步的。

react列表渲染key属性的作用

key的作用是提高渲染性能。为什么要使用key可以参考官方文档https://zh-hans.reactjs.org/docs/reconciliation.html。以下讲解为什么不推荐使用索引作为key值。

<!-- 尾部新增-->
<!-- before -->
<ul>
	<li key="1">1</li>
	<li key="2">2</li>
</ul>
<!-- after -->
<ul>
	<li key="1">1</li>
	<li key="2">2</li>
	<li key="3">3</li>
</ul>
<!-- 
	这种情况下，react会认为前两个节点没变过，只需要在尾部添加一条数据
 -->

<!-- 头部新增-->
<!-- before -->
<ul>
	<li key="1">1</li>
	<li key="2">2</li>
</ul>
<!-- after -->
<ul>
	<li key="1">3</li>
	<li key="2">1</li>
	<li key="3">2</li>
</ul>
<!-- 
	 这种情况下，react会认为前两个节点没变过，只需要改变内容，
	 然后在尾部添加一条数据。但是最简单的方法还是使用唯一id作
	 为key值，然后react会发现有两个节点没变过，只需要头部添
	 加一条数据，如下 
-->
<!-- before -->
<ul>
	<li key="id1">1</li>
	<li key="id2">2</li>
</ul>
<!-- after -->
<ul>
	<li key="id3">3</li>
	<li key="id1">1</li>
	<li key="id2">2</li>
</ul>