react学习

最新推荐文章于 2025-05-07 22:21:10 发布

原创最新推荐文章于 2025-05-07 22:21:10 发布

· 977 阅读

0 ·

版权

前端专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了React的基础知识，包括虚拟DOM的概念及其在提升页面更新效率中的作用，解析了网页呈现过程和Diff算法。此外，还涵盖了React的安装、元素渲染以及JSX的使用，强调了在React中添加自定义属性的规范。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考来源菜鸟教程
前期需要Node.js和webpack

React

组件化：抽离UI组件
react没有.vue这样的模板文件，一切都是以JS来表现的 script
ES6和ES7(async和await)要合格！

概念

虚拟DOM 文档对象模型

DOM：浏览器端有dom概念，用JS对象来表示页面上的元素，还提供了一些操作DOM对象的API
虚拟DOM：框架中，用JS对象来模拟页面上的DOM和DOM嵌套
为了实现页面上dom元素的高效更新：从内存中获取新旧两个dom树，对比，得到需要按需更新的dom元素
程序员可以手动模拟新旧两个dom树，就是虚拟dom的概念
虚拟dom：用JS对象的形式来模拟页面上dom元素和嵌套关系(虚拟dom以JS对象的形式存在)
目的实现页面元素的高效更新
HTML声明一个dom元素： <div id=”mydiv“ title=”说“ data-index=”0“> 哈哈 <p>你</p> </div> JS一个dom元素: var div = { tagName:'div'， attrs:{ id:'mydiv', title:'说', 'data-index':'0' }, childrens:[ '哈哈'， { tagName:'p', attrs:{}, childrens:[ ‘你’ ] } ] }

网页呈现过程

1.浏览器请求服务器获取页面HTML代码
2.浏览器要先在内存中解析DOM结构，并在浏览器内存中，渲染出一科dom树
3.浏览器把dom树，呈现到页面上

Diff算法

tree diff ：Tree按层对比
component diff：在tree diff中每层组件级别的对比
element diff：组件对比中，类型相同则进行元素级别的对比

React安装

React 可以直接下载使用，下载包中也提供了很多学习的实例。

本教程使用了 React 的版本为 16.4.0，你可以在官网 https://reactjs.org/ 下载最新版。
你也可以直接使用 Staticfile CDN 的 React CDN 库，地址如下：
引用时写到部分

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

官方提供的 CDN 地址：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

引入三个库：

react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。
举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,   	<--这里将h1标题，插入id=examle节点中-->
    document.getElementById('example')
);
</script>
</body>
</html>

React元素渲染

与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。
具体见：https://www.runoob.com/react/react-rendering-elements.html
React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：

<div id="example"></div>
<script type="text/babel">
const element =<h1>Hello, world!</h1>;
ReactDOM.render(
    element,
    document.getElementById('example')
);
</script>

更新元素渲染

<div id="example"></div>
<script type="text/babel">
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
}
setInterval(tick, 1000);
</script>

对上部的内容封装：

<div id="example"></div>
<script type="text/babel">
function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}
function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}
setInterval(tick, 1000);
</script>

继续改造：

<div id="example"></div>
<script type="text/babel">
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}
setInterval(tick, 1000);
</script>

react JSX 替换js

const element = <h1>Hello, world!</h1>;

要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：

<div id="root"></div>
	<script type="text/babel">
	const element = <h1 className="foo">Hello, world</h1>;
	ReactDOM.render(element, document.getElementById('root'));
	</script>

实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。

<div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
      	<h1>菜鸟教程</h1>
      	<h2>欢迎学习 React</h2>
        <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>