乘风破浪React—01React初体验

最新推荐文章于 2025-05-14 22:27:35 发布

爱你小前端

最新推荐文章于 2025-05-14 22:27:35 发布

阅读量277

点赞数

分类专栏：乘风破浪React 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_36154157/article/details/125354342

版权

乘风破浪React 专栏收录该内容

7 篇文章

订阅专栏

React的起源

React起源于facebook公司工程师开发时的一个bug，三个消息提示图标右上角的数字显示实时未读消息的数目，过多的操作容易产生问题。

工程师很轻易的排查并解决的bug，但是他们不满足于这个小问题的解决，开始思考出现这种错误背后的原因：

1、传统开发存在问题

过多关注操作界面的细节，同时需要借助jQuery来操纵大量原生DOM
数据是分散的，不利于管理维护

2、解决方法

组件化划分
以jsx维护UI样式
数据集中管理，state来储存组件内部状态，发生变化时再重新渲染页面

3、React特点

声明式编程：UI=F(state)
F就是render函数
- 命令式编程：描述详细路径，例如：一步一步执行for循环
- 声明式编程：告知目的地，例如：map函数直接告诉程序想要什么
组件化开发
多平台适配

React开发依赖

1、依赖三个库

react：核心库，提供核心函数、类
react-dom：根据端（web/native）不同，渲染为不同的组件
babel：将jsx语法解析为js语法，将es6语法解析为js5语法

在这里插入图片描述

开始只有react库, 后来为了区分web和native，将web和native的核心代码从react中分离出来成为react-dom

web端：react-dom会将jsx最终渲染成真实dom,显示在浏览器中
native端：react-dom将jsx渲染成原生控件（比如安卓中的Button和IOS中的UIButton）

2、引入三个库

方式一：html文档头引入三个库

    <!-- 安装依赖 -->
    <!-- crossorigin允许远程跨域版本的错误信息在本地也显示出来 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin ></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

方式二：本地下载react包并引入
方式三：使用npm包管理工具安装react脚手架

React初体验

开发如下小页面：h2标签展示文字Hello World，点击按钮改变文本，Hello World变为Hello React
在这里插入图片描述

1、babel使用

需要配置script标签属性为type="text/babel"才可以识别jsx语法

<script type="text/babel"></script>

2、react-dom使用

使用react-dom库中ReactDOM.render函数，将编写的React组件挂载到页面上
第一个入参为：React组件，使用jsx语法
第二个入参为：要挂载到的DOM容器，注意是以替换方式挂载，原来<div id="app"></div>内容会被替换掉
第三个入参为：回调函数，可选，可有可无

<body>
    <div id="app"></div>

    <script type="text/babel">
      let message = "Hello World";

      const handleBtnClick = () => {
        message = "Hello React";
      };

      ReactDOM.render(
        <div>
          <h2>{message}</h2>
          <button onClick={handleBtnClick}>改变文本</button>
        </div>,
        document.getElementById("app")
      );
    </script>
  </body>