Components的一些特性

创建按钮

当子节点数量大于1时，可以用<div>或<React.Fragment>将其括起来。

内嵌表达式

JSX中使用{}嵌入表达式。

设置属性

  • class -> className
  • CSS属性：background-color -> backgroundColor，其它属性类似

数据驱动改变Style

可以通过使用{}符号，在其中嵌入一个字典来实现。

注：React的数据驱动的基本变量是字典

渲染列表

  • 使用map函数，可以遍历字典的中每一个元素。
  • 每个元素需要具有唯一的key属性，用来帮助React快速找到被修改的DOM元素。

Conditional Rendering

利用逻辑表达式的短路原则。

  • 与表达式中 expr1 && expr2，当expr1为假时返回expr1的值，否则返回expr2的值
  • 或表达式中 expr1 || expr2，当expr1为真时返回expr1的值，否则返回expr2的值

绑定事件

  • 注意妥善处理好绑定事件函数的thi，尽量使用匿名函数来减少this的歧义。

修改state

如果仅仅是在组件中修改了某些数据，按原理来讲，页面并不会实际渲染，React的数据驱动是通过this.setState()函数实现的，所以建议以后修改数据尽量准寻以下步骤。

  • 需要使用this.setState()函数
  • 每次调用this.setState()函数后，会重新调用this.render()函数，用来修改虚拟DOM树。React只会修改不同步的实际DOM树节点。