react总结第一天

React 特点（最新版本18.2.0）

1.声明式设计。 2.高效（最大限度地减少与DOM的交互）。 3.JSX （JavaScript 语法的扩展）。 4.组件（使得代码更加容易得到复用）。 5.单向响应的数据流（从而减少了重复代码。

react与vue的区别

1: 数据绑定--react没有双向数据绑定（单向数据绑定）vue(双向数据绑定 v-model) 2: diff算法 2-1: vue 模版更倾向于html 在某一个节点数据发生改变的时候不会更新全部的dom节点(v-key) 2-2: react 在数据进行更新的话会进行diff算法去比较之前的dom变化 2-3: 相较于vue的性能比react相对于好一点 3: vue官方文档相较于react的文章更容易懂 4: 语法上的不同 vue的语法template, react的语法jsx

虚拟的dom

含义：由普通的 JS 对象来描述 DOM 对象，因为不是真实的 DOM 对象 在vue当中有模板通语法将模板转换为render 优点: 大量的dom渲染会导致页面渲染速度变的极慢从而影响用户的产品体验 但是并不是所有的 DOM 操作都能通过虚拟 DOM 提升性能 比如删除单个节点的时候 使用虚拟dom就不如直接原生的dom删除 js-dom { sel: "div", data: {}, children: undefined, text: "Hello Virtual DOM", elm: undefined, key: undefined } 打印效果 VNode { tag: 'span', data: { directives: [ [Object] ], staticClass: 'demo' }, children: [ VNode { tag: undefined, data: undefined, children: undefined, text: 'This is a span.', elm: undefined } ], text: undefined, elm: undefined }

react需要安装的东西

1：npm(cnpm,yarn) install react -g 2: 创建项目npm create-react-app my-app(项目名称)

react-class组件和函数组件

1: class import React, { Component } from 'react' export default class index extends Component { render() { return (

) } } 2: function const helloWord = (props) => { return () }

区别:

1. 从直观上来讲，函数组件的代码较少，相对比较简洁
2. 函数组件是无状态组件的思想。函数组件中没有this，没有state，也没有生命周期， 这就决定了函数组件是展示型组件，接收props渲染DOM，而不关注其他逻辑
3. 因为函数组件不需要考虑组件状态和生命周期中的各种比较校验