初识React

最新推荐文章于 2023-12-05 11:50:21 发布

Zhouy2_

最新推荐文章于 2023-12-05 11:50:21 发布

阅读量185

点赞数

分类专栏： ReactJS 文章标签： React

本文链接：https://blog.csdn.net/zhouyy919/article/details/81513885

版权

ReactJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ReactJS官网地址：React官网，GitHub地址：React的Github地址

React特点：

虚拟DOM：React也是以数据驱动的，每次数据变化，React都会扫码整个虚拟DOM树，自动计算与上次虚拟DOM的差异变化，然后针对需要变化的部分进行实际的浏览器DOM更新。
组件化：React可以从功能角度横向划分，将UI分解成不同的组件，各组件都独立封装，整个UI是由一个个小组件构成的一个大组件，每个组件只关心自身的逻辑，彼此独立。
单项数据流：React设计者认为数据双向绑定虽然便捷，但是在复杂场景下副作用也是很明显，所以React更加倾向于单向的数据流动，从父节点传递到子节点。当然React也可以使用ReactLink实现双向绑定，但是不建议使用。

我们只需要在页面中引入两个js文件（react.min.js和react-dom.min.js），即可开始构建一个React页面。

一、第一个React页面，Hello World页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="reactContainer"></div>
  <script src="./react.js"></script>
  <script src="./react-dom.js"></script>
  <script>
  var HelloComponent = React.createClass({
    render: function() {
      return React.createElement('h1',null,'Hello Word!');
    }
  });
  ReactDOM.render(
    React.createElement(HelloComponent,null),
    document.getElementById('reactContainer')
  );
  </script>
</body>
</html>

二、React支持JAX语法

如果要使用JSX语法的支持，可以使用babel来进行转换。也可以直接引入babel的核心文件browser.min.js来进行转换。

使用JSX语法重写Hello World页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="reactContainer"></div>
  <script src="./react.js"></script>
  <script src="./react-dom.js"></script>
  <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.js"></script>
  <script type="text/babel">
  var HelloComponent = React.createClass({
    render: function() {
      return <h1>Hello {this.props.name || 'World'} </h1>
    }
  });
  ReactDOM.render(
    <HelloComponent name="Zhouy2" />,
    document.getElementById('reactContainer')
  );
  </script>
</body>
</html>

使用JSX语法的好处：

可以使用熟悉的语法仿照HTML来定义虚拟DOM
程序代码更加直观
与JavaScript之间等价转换，代码更加直观
JSX支持表达式，只要使用{}括号，就可以使用表达式。只是表达式不支持if...else这样的语句，但是支持三元运算符(a?b:c)和二元运算符(a || b)

Zhouy2_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识React

ReactJS官网地址：React官网，GitHub地址：React的Github地址React特点：虚拟DOM：React也是以数据驱动的，每次数据变化，React都会扫码整个虚拟DOM树，自动计算与上次虚拟DOM的差异变化，然后针对需要变化的部分进行实际的浏览器DOM更新。组件化：React可以从功能角度横向划分，将UI分解成不同的组件，各组件都独立封装，整个UI是由一个个小组件构...
复制链接

扫一扫