四、JSX的条件渲染
React条件渲染
- 某些情况下,界面的内容会根据不同情况显示不同内容,或决定是否渲染其部分内容
- Vue中,会通过指令控制 v-if v-show
- React中,所有的条件判断都和JavaScript代码一致
- 常见的条件渲染方式有哪些?
- 条件判断语句
- 适合逻辑较多的情况
- 三元运算符
- 适合逻辑简单的情况
- 与运算符&&
- 适合条件成立,渲染某一组件,不成立,什么也不渲染
- v-show效果
- 主要控制display属性是否为none
五、JSX的列表渲染
React列表渲染
- 在真实开发中,我们会从服务器请求到大量数据,数据以列表的形式存储
- 如 歌曲 歌手 排行榜列表数据
- 如 商品 购物车 评论列表数据
- 如 消息 动态 联系人列表数据
- 在React中并没有像Vue模板中的v-for指令,我们需要通过JavaScript代码的方式组织数据,转成JSX
- 很多从Vue转到React的人非常不习惯,认为Vue更加的简洁
- 但是React中的JSX正是因为和JavaScript无缝衔接,让它可以更加灵活
- 另外React是真正可以提高我们编写代码能力的一种方式
- 那么在React中如何展示列表呢?
- 在React中,展示列表最多的方式是使用数组的map高阶函数
- 很多时候我们在展示一个数组中的数据前,需要对它进行一些处理
- 如 过滤掉一些内容: filter函数
- 如 截取数组中一部分: slice函数
列表中的key
- 我们发现在前面的代码中,都会报一个警告:
- 这个警告是告诉我们需要在列表展示的jsx中添加一个key
- key主要的作用是为了提高diff算法时的效率
六、JSX的原理和本质
JSX的本质
- 实际上,jsx仅只是React.createElement(component,props,...children)函数的语法糖
- 所有的jsx最终都会被转换成React.createElement的函数调用
- createElement需要传递三个参数:
- 参数一:type
- 当前ReactElement的类型
- 如果是标签元素,那么就使用字符串表示"div"
- 如果是组件元素,那么就直接使用组件的名称;
- 参数二:config
- 所有jsx中的属性都在config中以对象的属性和值的性质存储
- 如 传入className作为元素的class
- 参数三:children
- 存放在标签中的内容,以children数组的方式进行存储
- 如果是多个元素怎么办呢? React内部有对它进行处理
虚拟DOM的创建过程
- 我们通过React.createElement创建出来一个ReactElement对象:
- 这个ReactElement对象有什么作用呢?为什么要创建他呢?
- React利用ReactElement对象组成了一个JavaScript的对象树
- JavaScript的对象树就是 虚拟DOM(Virtual DOM)
- 如何查看ReactElement的树结构呢?
- 可以将之前的jsx返回的结果进行打印
- 而ReactElement最终形成的树结构就是Virtual DOM
jsx -> 虚拟DOM -> 真实DOM
jsx代码 -> ReactElement对象 -> 真实DOM
声明式编程
- 虚拟DOM帮助我们从命令式编程转到了声明式编程的模式
- React官方说:Virtual DOM是一种编程的理念
- 在这个理念中,UI以一种理想化或者说虚拟化的方式保存在内存中,并且它是一个相对简单的JavaScript对象
- 我们可以通过ReactDOM.render让 虚拟DOM 和 真实DOM同步起来,这个过程叫做协调(Reconciliation)
- 这种编程的方式赋予了React声明式的API:
- 只需要告诉React希望让UI是什么状态
- React来确保DOM和这些状态是匹配的
- 你不需要直接进行DOM操作,就可以从手动更改DOM,属性操作,事件处理中解放出来.
