ajax axios 链接

React 是一个构建用户界面的JS库。

网页局部刷新，当用户和网站发生交互时，我们不再时简单的直接通过浏览器进行页面的跳转，而是通过JS中的ajax直接通过js向后台服务器发送请求，请求过程用户毫无感知。相应数据会通过回调函数返回给JS（promise.then，axios二次封装）。

Ajax + DOM 使得局部刷新成为可能。但DOM挺难操作的，而且性能消耗大，页面会有显示延迟。我们就需要React vue等技术。React是为了代替DOM来流畅的渲染页面。

React特点：

  • 虚拟DOM
  • 声明式
  • 基于组件
  • 支持服务器端渲染
  1. 原生JS操作DOM添加一个div

<div id="root"> </div>

alt

  1. 通过react

使用react需要引入两个库，一个是react，web端还有react-dom，移动端还有react-native。

alt

三大API：

  • React.createElement()

  • ReactDOM.createRoot()

  • root.render()

每次render会产生一个虚拟DOM树，会将这次和上次的渲染进行比较，用Diff算法进行高效对比。页面只会修改不同地方的真实DOM，其余的地方不会变。虽然我们的react创建的元素是不支持修改的，但是可以重新写一遍，覆盖它，替换它。

JSX

一般渲染

JSX是JavaScript的语法扩展，JSX使得我们可以类似于HTML的形式去使用JS。

JSX的注意事项：

  • JSX不是字符串，不要加引号

  • JSX中的html标签应该小写，React组件应该大写开头

  • JSX中有且只有一个根标签

  • JSX的标签必须正确结束 就是有/ 比如<input type="text" />

  • 在JSX中可以使用 { } 嵌入表达式

    • 有值的语句就是表达式

  • 如果表达式是空值、布尔值、undefined这些值，将不会显示

  • 在JSX中，,属性是可以直接在标签中设置

    注意：class需要使用className代替， style中必须使用对象设置

    const div = <div>
          <button id="btn" className="didi" onClink=()=>{} 
          style={{backgroundColor:'red',border:1px solid green}}>点我</button>
		</div>
列表渲染

列表渲染需要加key；因为可以提高渲染性能，为什么，因为我们react在渲染的时候默认是从上到下节点内容一个个比较。如果在列表最后push一个数据上去，那前面的数据节点不会发生改变，这倒没事。但当我们在列表数组最前面unshift一个数据的时候，就是在最前面加一个数据的时候，react默认对比新DOM和旧DOM时，第一个变了，及时后面数据没变，但也得重新渲染真实的DOM。所以我们的解决方案就是添加key，这样还会对比唯一的key。

const data = ['andy','lily','peter']
//const arr = [];
//for(let i=0;i<data.length;i++){
//	arr.push(<li>{data[i]}</li>);
//}
//const list = <ul>{arr}</ul>

const arr = data.map((item)=>{
	return <li>{item}</li>		// 这里的item是参数，得外部加大括号
})

const root = ReactDOM.create....

root.render(arr)

虚拟DOM Diff算法

在React我们操作的元素被称为React元素，并不是真正的原生DOM元素

React通过虚拟DOM，将React元素和原生DOM，进行映射，虽然操作的React元素，但这些操作最终都会在真实的DOM中体现

虚拟DOM的好处：

  • 降低API复杂度(写法简单)
  • 解决兼容问题
  • 提升性能（减少DOM的不必要操作）

每当我们调用root.render()时，页面就会发生重新渲染

React会通过diffing算法，将新的元素和旧的元素进行比较，通过比较找到发生变化的元素，并只对变化的元素进行修改。