Taro和JS笔记系列

cover-view文字显示不全：在文字后添加全角空格“　”
scrollIntoView的用法：

setScrollInto("target")
<ScrollView 
onScroll={() => setScrollInto(null)}
scrollIntoView={scrollInto}
>
<View id="target"/>
</ScrollView>

使用props值初始化状态，在props值变化时状态不会随之改变，需要使用useEffect更新状态。
使用以下代码强制刷新渲染

  const [_, update] = useState<any>();
  update(new Date());

antd部分组件不支持Webpack热更新，在webpack配置中的plugins加入browser-reload-plugin插件实现强制刷新页面。
VSCode中使用Prettier插件实现eslint自动格式化。
typeof null === 'object'
React 官方推荐将每项数据的 ID 作为组件的 key，以达到上述的优化目的。并且不推荐使用每项的索引作为 key，因为传索引作为 key 时，就会退化为不使用 key 时的代码。[1]

结论：不使用index 作为 key ，除非不涉及任何更新修改；使用 index 作为 key 会导致渲染效率的问题；使用 index 作为 key 会导致更新不符预期的问题。[2]

从react 18开始, 使用了createRoot创建应用后, 所有的更新都会自动进行批处理(也就是异步合并).使用render的应用会保持之前的行为.
jsdoc写法，必须是两个星号：

/**
@param id 目标id
@param type 类型
*/

React Native容器白屏/显示不全：给app.tsx的View设置minHeight: 100%
.then 或者 .catch 中 return 一个 error 对象并不会抛出错误，所以不会被后续的 .catch 捕获。

Promise.resolve().then(() => {
  return new Error('error!!!')
}).then(res => {
  console.log("then: ", res)
}).catch(err => {
  console.log("catch: ", err)
})
 
//"then: " "Error: error!!!"
 
// 这验证了第4点和第6点，返回任意一个非 promise 的值都会被包裹成 promise 对象，
// 因此这里的return new Error('error!!!')也被包裹成了return Promise.resolve(new Error('error!!!'))。

默认情况下，当一个组件重新渲染时，React 会递归地重新渲染它的所有子组件。
条件渲染的陷阱：&&左边不能是数字，如果是数字0，该表达式的结果是0。[3]

// 可渲染值
1 && <FooComponent /> // => jsx计算结果为<FooComponent />，因此渲染<FooComponent/>
"a string" && <FooComponent /> // => jsx计算结果为<FooComponent />，因此渲染<FooComponent />
0 && <FooComponent /> // => jsx计算结果为0，Renders '0'
true && <FooComponent /> // => jsx计算结果为<FooComponent />，因此渲染<FooComponent />

// 不可渲染值
false && <FooComponent /> // => jsx计算结果为false，因此什么都不渲染
null && <FooComponent /> // => jsx计算结果为null，因此什么都不渲染
undefined && <FooComponent /> // => jsx计算结果为undefined，因此什么都不渲染
{"1"} // 渲染为"1"
{0} // 渲染为0
{<FooComponent />} // 假设为正常组件，渲染为<FooComponent />

{undefined} // 不渲染
{true} // 不渲染
{false} // 不渲染
{''} // 不渲染
{null} // 不渲染

?: string 更适合表示一个可能不存在的属性，而 : string | undefined 更适合表示一个属性存在，但其值可能是 undefined
异步实现加法：1+2、3+4……通过并行处理减少时间复杂度

参考文献

[1]https://cloud.tencent.com/developer/article/1810002

[2]https://juejin.cn/post/7099745927413366797

[3]https://segmentfault.com/a/1190000041355015