正文

react学习笔记-1-什么是react，react环境搭建以及第一个react实例

Gabriel_wei  Gabriel_wei  2022-08-14  226

关键词：

什么是react？
react的官方网站：https://facebook.github.io/react/
下图这个就是就是react的标志，非常巧合的是他和我们的github的编辑器Atom非常相似。react是Facebook官方推出的一个javascript的库，现在已经有了非常多的库和框架Facebook为什么还要开发一款新的框架呢？原因就是 Facebook遇到了一些新的问题。Facebook需要解决的问题是构建数据不断变化的大型应用。大型应用是什么意思？数据不断变化带来什么问题呢？
数据变化可以导致两个非常严重的问题，第一个问题是大量的dom操作;第二个问题就是逻辑会变得非常的复杂。数据要通过页面来进行展示，数据不断变化，就会导致dom不断变化，从而需要进行大量的dom操作，尽管我们已经了jQuery等操作dom的利器，但我们仍然需要编写许多手动的dom操作代码。数据和逻辑密切相关，数据变化的时候，逻辑也会发生变化，相信大家都会有这样的经历，当你去修改一个已有项目的时候，改动一个地方的代码，往往会产生许多意料之外的后果，这就是因为数据和逻辑之间的关系非常复杂，牵一发而动全身，所以数据变化会导致这样两种后果。
那react如何来解决这两个问题呢？对于dom操作，react的操作是采用自动dom操作，在react中，你不需要手动进行dom操作，只需要告诉react要展示什么内容，react会自动来操作dom。针对第二个问题，react的方案吧状态和内容显示的对应起来，这样我们就可以一目了然的知道，状态变化，内容会如何变化，从而理清程序的逻辑。
react有两个特点：第一个是简单，第二个是声明式。简单有两层意思，第一层意思是react学习简单，上手容易，第二层意思是是react写出的代码非常简单，容易阅读。声明式就是我们前面说的自动dom操作，你只需要声明给react显示什么内容，至于如何把这些内容显示到页面上，是由react来帮你完成的。
在react中，核心是组件，组件的设计目的是提高代码的复用率，降低测试难度和代码复杂度。
组件提高代码复用率：组件将数据和逻辑封装，类似面向对象中的类。我们可以将通用的逻辑和数据封装起来，从而能提高代码的复用率。
降低测试难度：组件高内聚，低耦合，很同意对单个组件进行测试，通过模拟他的输入，或者输出，来测试组件的功能是否完善。
降低代码复杂度：直观的语法可以极大地提高可读性，降低代码的复杂度和维护难度。
react的发展过程
2013年6月，Facebook官方发布react--------》2013年9月，react热度上涨，越来越多的人开始关注react-------》2015年3月，React Native发布（就是用react来编写跨平台的移动端应用），简单说就是我们可以用react来编写iOS，Android和Windows phone的应用，在目前的前端领域，代码模块化和用js来编写跨平台的移动端应用，是两个主要的探索方向，在用js来编写跨平台的移动端应用中，已经有了很多的方案，但是这些方案或多或少都有一些缺陷.
react的现状
react是发布在github上面的开源项目。
国外使用的公司：Facebook，Flipboard，Airbnb，BBC，Github，Instagram,Reddit,Uber,WhatApp,yahoo
国内使用React的公司：支付宝，淘宝，大搜车，Teambition,豆瓣，豌豆荚
这个教程使用的是0.13.2,我们是学习，就不下载了，直接使用cdn服务器：http://www.bootcdn.cn/
我们需要两个文件
react.js://cdn.bootcss.com/react/0.13.2/react.js
JSXTransformer.js://cdn.bootcss.com/react/0.13.2/JSXTransformer.js
使用的时候，记得在前面加上http://
可能这么说有点迷瞪，接着看下面的就懂了。

react的程序结构
react程序本质上就是一个html页面，html页面中可以编写Js代码和css代码，当然我们也可以将js和css单独存放，最后在引入到html文件中。
这里需要注意的是，react程序非常特别的一点，就是使用了jsx，我们后面会详细说明jsx的用法，这里只要知道jsx是写在js里面的就行，下面我们放代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
</head>
<body>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
    <script type="text/jsx">
       var HelloWorld=React.createClass({
           render:function(){
              return <p>Hello,world</p>
           }
       });
       React.render(<HelloWorld></HelloWorld>,document.body);
    </script>
</body>
</html>

注意我们的第三个script的type类型为text/jsx,注意HelloWorld的首字母大写，我们后面会说。

react学习笔记-4-什么是生命周期

什么是声明周期？组件本质上就是状态机，输入确定，输出一定确定。如何理解这一点？react有两个特点，第一个就是去除了所有的手动dom操作，也就是使用jsx。第二个就是组件把状态和结果一一对应起来，从而能够直观的看出... 查看详情

react学习笔记(代码片段)

...件时React最重要的内容，组件表示页面中的部分内容学习一次，随处使用使用React可以开发Web应用，使用React可以开发移动端，可以开发VR应用2.React基本使查看详情

react学习笔记-元素渲染

ReactLearnNote3React学习笔记（三）标签（空格分隔）：ReactJavaScript二、元素渲染元素是构成react应用的最小单位。元素是普通的对象。元素是构成组件的一个部分。1.将元素渲染到DOM中<divid="root"></div>中的所有内容都将由Reac... 查看详情

react学习笔记(代码片段)

...件时React最重要的内容，组件表示页面中的部分内容学习一次，随处使用使用React可以开发Web应用，使用React可以开发移动端，可以开发VR应用2.React基本使用React的引用创建React元素并渲染到页面<script>//2创建reac... 查看详情

react学习笔记1

前端学习笔记今天开始学习react.js特开这一篇随笔作为react的学习笔记，主要记录看到的重点内容和自己的心得感想：一.基本组件和方法1.reactjs引入了一个虚dom的概念，对于每一个dom点都会存在一个状态，如果这个dom上的属性发... 查看详情

react学习笔记-06

1.在调用setState之后发生了什么？　　在代码调用setState之后，React会将传入的参数对象与组件当前状态合并，然后触发调和过程。在调和过程中，react会以相对搞高效的方式根据新的状态构建DOM树，在构建DOM的时候，react会比较新... 查看详情

react学习笔记-01

1.HTML模板　　Jsx是react的语法糖，最终会被编译成js语法。因此需要第三方库browser将jsx转换成js。　　由于react0.14版本之后，将react和react-dom拆分，所以需要分别引入react和react-dom　　这是官网的一个demo1<!DOCTYPEhtml>2<html>3&... 查看详情

初学react：jsx语法

　　这是本人初学React做的学习笔记;讲的不是很深，只算是简单的进行介绍。这是一个小系列。都是在同一个模板中搭建的，但是代码是不能正常执行的。 >>第一个组件.js ‘usestrick‘/*===========================JavaScript的X... 查看详情

react学习笔记总结(代码片段)

文章目录1.React之props的使用2.React之对props进行限制3.React之props只读(知道修改在这是什么效果！)4.React之props简写方式5.类式组件中的构造器与props的注意事项6.函数式组件使用props7.类式组件字符串形式的refs属性8.React之回调形... 查看详情

react学习笔记总结(代码片段)

react源码分析=;reac初次渲染分析(代码片段)

文章目录1.render阶段legacyRenderSubtreeIntoContainer1.1.legacyCreateRootFromDOMContainer1.1.1.ReactRoot1.1.1.1.createFiberRoot1.1.1.2.createHostRootFiber续1.legacyRenderSubtreeIntoContainer1.2.root.render()1 查看详情

react源码分析=;reac初次渲染分析(代码片段)

react学习笔记

1、react使用JSX语法来描述html，位于花括号的值会被当做一个JavaScript表达式进行求值2、props是组件的不可变属性，有个重要属性：children，可以使用props.children来引用位于前置标签和后置标签之间的内容3、state组件所有可变的属性... 查看详情

react学习笔记

　　在开篇之前，先来说说选择react的初衷。　　一个初学者，在开始选择深入了解一个框架之前，我查阅了一些资料，做出了对三大框架的一些基本分析。　　1.数据流。Vue和Angular都是支持双向数据绑定，也就是在界面的操作... 查看详情

学习react笔记二（组件）(代码片段)

一、组件组件呢一般还是挺常用的但react怎么创建组件呢1.函数组件constCom=function()return(<div>奥特曼</div>)2.类组件importComponentfrom'react'//提供最核心的react组件功能//注意固定写法classComextendsComponentrender()return<div&g... 查看详情

react学习笔记

1、JSX当中可以插入JavaScript表达式，表达式返回的结果会相应的渲染到页面上　　表达式用{}包裹，在这个里面，可以放变量、表达式计算、函数、JSX等，render会把这些代码返回的内容如实的渲染到页面上　　表达式不仅可以用... 查看详情

react学习笔记总结(代码片段)

文章目录1.redux介绍2.redux工作流程3.redux的使用4.redux完整结构补充5.redux的异步action6.react-redux库与redux库7.react-redux库的实战8.react-redux的connect最精简写法9.react-redux的Provider组件作用10.react-redux整合UI组件和容器组件11.redux的combineReduce... 查看详情

react学习笔记总结(代码片段)

文章目录1.React(v16.8版本)生命周期2.React(v16.8版本)生命周期更新流程2.1三个更新流程2.2setState()的生命周期流程(对应上图2号线)2.3forceUpdate()的生命周期流程(对应上图3号线)2.4父组件render()渲染的生命周期流程(对应上图1号线)2.5React(v... 查看详情