React JSX
优点:
- JSX执行更快,编译为JavaScript代码时进行优化
- 类型更安全,编译过程如果出错就不能编译,及时发现错误
- JSX编写模板更加简单快速
注意:
- JSX必须要有一个根节点
- 正常的普通HTML元素要小写。如果是大写,默认认为是组件
JSX表达式
- 由HTML元素构成
- 中间如果需要插入变量使用{}
- {}中间可以使用JSX对象
- {}中间可以使用JSX对象
- 属性和HTML内容一样都是用{}插入内容
JSX_style 样式
- class中,不可以存在多个class属性
- style样式中,如果存在多个单词的属性组合,第二个单词开始首字母大写
React组件
- 函数式组件
- 类组件
- 复合组件:组件中有其他组件,复合组件既可以有类组件又可以有函数组件
函数式组件与类组件的区别和使用,函数式比较简单,一般用于静态没有交互的组件页面。
类组件一般又成为动态组件,那么一般会有交互或者数据修改操作。
react State(react 状态)
- 相当于Vue中的data,但是使用方式与Vue不一致
- 在class中的构造器constructor中初始化
- 使用setState来修改,否则不能渲染(不能直接修改)
- 通过this.setState修改完数据后,并不会立即修改DOM里面的内容, react会在这个函数修改完之后,统一对比虚拟DOM对象,然后再统一修改提升性能