美文网首页
学习笔记:React概述

学习笔记:React概述

作者: 双鱼子曰1987 | 来源:发表于2021-03-24 09:55 被阅读0次

一、概述

1.1、基本概念

react 基础的原理库,主要涉及实现的理念
react.js 基于react的,用来website网页开发
reactNactive 基于react,应用于原生应用开发,即混合应用开发
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码

  • 使用场景:react 主要用来做页面开发,相当于MVC中的view层。

1.2、react的重要特性:

  • 组件化开发。
  • 数据流,其实现单向数据流的绑定。
  • 虚拟Dom(virtualDom)概念。

1.3、说说React对前端页面刷新逻辑优化

-> 1、全局刷新整个网页
-> 2、局部刷新部分网页(基于ajax操作Dom,进行局部刷新)
-> 3、虚拟Dom(Diff算法,得到Dom差异,有更改的Dom才更新)

React核心原理是构建虚拟DOM树,通过diff算法,计算得到需要更新的节点,而不是刷新整棵DOM,提高性能。

1.4、开发准备

1、前端基础知识:html、css、JavaScript
2、JSX语法知识
3、ES6相关知识
4、熟悉React框架的API

二、开发环境搭建

2.1、开发工具,ATOM方案

  • 开发环境安装
    本人主要是通过create-react-app脚手架安装和创建项目。
    React环境搭建

  • 开发工具ATOM方案
    安装插件open in browseratom html previewautocomplete path

2.2、关于JSX语法简介

  • JSX标签也就是HTML标签,在JavaScript中使用这些标签的时候,可以不用“”包含起来。
  • 语法糖,让你可以在js中直接使用html语法,页面层次直观明了、效率更高。
  • JSX最终会被编译成JavaScript代码。(由 browser.min.js 库代码完成)

2.3、使用create-react-app创建项目相关说明

  • node-modules,整个项目的依赖包

  • 关键文件
    index.js,整个应用的入口文件
    App.js,根组件文件

  • react-scripts
    通常情况下,我们创建spa应用时是使用npm安装项目依赖,在通过配置webpack.config.js进行配置,搭建好环境后在src编写源代码。
    create-react-app是自动构建,在package.json中只有react-scripts作为依赖,而在reacr-scripts中已经配置好了项目所有需要的。

  • react-scripts的工作原理

三、基本的使用

  • step 1、定义组件
    下面例子将在root标签加入element组件代码。
// 将element标签渲染到root标签下
const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is my first react demo!</h>
    </div>
);
  • step 2、使用函数方式ReactDOM.render(e, p);创建React组件
// html代码中的某个标签
<div id="root"></div>

ReactDOM.render(element, document.getElementById('root'));

学习实例


参考

菜鸟网络-React教程
React官网
网课:《蓝鸥React Native零基础入门到项目实战》

相关文章

网友评论

      本文标题:学习笔记:React概述

      本文链接:https://www.haomeiwen.com/subject/gxdoqltx.html