React学习笔记1：React基本概念

React简介

概念

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
用于动态构建用户界面的 JavaScript 库(只关注于视图)
由Facebook

特点

声明式编码
组件化编码
React Native编写原生应用
高效（优秀的Diffing算法）

React高效的原因

使用虚拟DOM，不总是直接操作页面真实DOM
DOM Diffing算法，最小化页面重绘

React JSX

JSX

全称：JavaScript XML
react定义的一种类似于XML的JS扩展语法：JS+XML本质是React.createElement(component,props,...children)方法的语法糖
作用：用来简化创建虚拟DOM
标签名任意：HTML标签或者其他标签
标签属性任意：HTML标签属性或者二其他
基本语法规则
- 遇到<开头的代码，以标签的语法解析：html同名标签转换为html同名元素，其他标签需要特别解析
- 遇到以{开头的代码，以JS语法解析：标签中的js表达式必须用{}包含
babel.js的作用
- 浏览器不能直接解析JSX代码，需要babel转移为纯JS的代码才能运行
- 只要用了JSX，都要加上type="text/babel"，声明需要babel来处理

渲染虚拟DOM（元素）

语法：ReactDOM.render(virtualDOM,containerDOM)
作用：将虚拟DOM元素渲染到页面中的真实容器DOM中显示
参数说明
- 参数一：纯js或jsx创建的虚拟DOM对象
- 参数二：用来包含虚拟DOM元素的真实DOM元素对象（一般是一个div）

模块与组件、模块化与组件化的理解

模块

向外提供特定功能的js程序，一般就是一个js文件
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
作用：复用js，简化js的编写，提高js运行效率

组件

用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
为什么要用组件：一个界面的功能更复杂
作用：复用编码, 简化项目编码, 提高运行效率

模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

React学习笔记1：React基本概念相关推荐

React学习笔记一(React入门+JSX+脚手架)
文章目录 1. React介绍和特点 1.1 React是什么 1.2 React的特点 2. React的开发依赖 2.1 React的三个依赖 2.2 Babel和React的关系 2.3 Rea ...
React学习笔记六 React拓展 - SetState
React拓展 - setState setState更新状态的两种写法 1.setState({}, [callback]) export default class Test extends Co ...
react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
react render没更新_web前端教程分享React学习笔记（一）
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
React学习笔记：入门案例
React学习笔记:入门案例 React 起源于 Facebook 内部项目,因为市场上所有 JavaScript MVC 框架都不令人满意,公司就决定自己写一套,用来架设 Instagram 的网站 ...
React学习笔记(五) 状态提升
状态提升究竟是什么东西呢?别急,下面让我们一步一步来看看究竟要怎么使用状态提升假设我们有这样一个需求,提供两个输入框(分别属于两个组件),保证输入框里面的内容同步好,下面我们先来封装一个输入框组件 ...
React学习笔记 - 组件Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
MySQL学习笔记01【数据库概念、MySQL安装与使用】
MySQL 文档-黑马程序员(腾讯微云):https://share.weiyun.com/RaCdIwas 1-MySQL基础.pdf.2-MySQL约束与设计.pdf.3-MySQL多表查询与事务 ...
vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...

React学习笔记1：React基本概念

React简介

概念

特点

React高效的原因

相关js库

React JSX

JSX

渲染虚拟DOM（元素）

模块与组件、模块化与组件化的理解

模块

组件

模块化

组件化

React学习笔记1：React基本概念相关推荐

最新文章

热门文章