react自学笔记总结不间断更新

React

React 是由Facfbook维护的一套框架,并且引用到instagram

React只是我们熟悉MVC框中的V层,只是视图层面的一个框架,只有俩个半api(createClass,createElement,render)

React与Angular的区别

React: 性能好,单向数据绑定,不是完整的框架。

Angular: 性能较差,双向数据绑定,是一套完整的框架

https://www.zhihu.com/question/23444167

为什么React的性能要好?

因为React做了俩点优化。

1、  在渲染时性能的优化

React是创建了一个虚拟dom,这个dom不是真正页面中的dom元素,它实质上是一个js对象,用js对象存储dom上的信息,因此比真是的dom小得多,因为他只记录的一些必要的信息。

操作一个虚拟dom需要的性能要远小于操作一个真实dom的性能,在前端开发一个web应用与开发一个网站不同,web应用通常是一个单页面,因此每次做一些交互会涉及各种dom操作,因此无节制的操作dom严重影响了页面的性能,但是我们只是操作虚拟dom会很好的降低对性能的消耗,在必要的时候将视图渲染到页面之中。

2、  在开发时的优化

React的开发理念是创建一个虚拟dom,而虚拟dom是一个js对象,它不是基于某一个端,比如真实的dom可能需要浏览器环境,它是基于web端的,所有通过React开发出来的组件可以用于任何平台,比如,服务器端,web端,ios端,android端

将虚拟dom引用到不同的端上需要不同的插件,然后调用不同的render方法。

学习React

认识React

1、  createElement()是用来创建虚拟dom的方法,他有一些参数

第一个参数表示:虚拟dom的名称,通常是一些标签名称,比如:div a p span

第二个参数表示:虚拟dom的属性,比如:className id title value

从第三个参数开始:表示虚拟dom的子节点。

2、  render()是用来将虚拟dom渲染到页面的方法

第一个参数表示:虚拟dom’元素

第二个参数表示:真是的dom元素

第三个参数表示:一个回调函数

----------------------------------------------------------------------------------------------------

写一个非jsx编译时的虚拟dom程序

------------------------------------------------------------------------------------------------------------------

组件

1组件是做什么的?

如果一个虚拟dom复用多次的时候,通常我们将它封装在一个组建当中,通常用组件封装一组虚拟dom,这一组虚拟dom通常称他为虚拟dom树。

2组件如何创建?

createClass()是创建组件的方法,组件名称需要大写,参数是一个对象,对象中的属性和方法是对组件的说明:

属性1:render()方法,它是将组件中的虚拟dom输出,所以我们将虚拟dom定义在render()中并返回一个虚拟dom树。

**********************************写一个组件程序。

Jsx语法引用

1.为什么引用jsx语法?

解决了创建虚拟dom成本过大的问题。

2.什么是jsx语法?

简单地说,就是jsx语法让我们可以再js中写xhtml

3.如何引用jsx语法?

  1. 引用一个库文件browser.min.js或者browser.js都行
  2. 在编写React的script标签的type属性为text/babel

**********************************jsx的程序编写

插值符号

  1. 什么是插值符号?

插值符号简单的说就是{},在jsx语法中书写注释需要写在插值符号中。

组件的属性

  1. props属性

1.props属性是什么?

和html给标签添加一个类一样,对于完全一致的统一组件他们战士的样式是完全一致的,给其中一个天价一些属性,此时这个组件展示的结果就可能会不同,所以react提出了组件属性的概念。

2.如何添加props属性?

在jsx中为组件添加属性跟html中添加属性的方法是一模一样的,只不过react组件可以执行插值(就是可以将js中数据添加到组件中)

  1. state属性

1什么是无状态组件?

如果组建创建并渲染到页面中以后不会再更改,也就是说组件式一成不变的,这类组件我们只需要在创建之初为其添加一些属性即可完成对央视行为的控制,这类组件以后再也不会改变了,我们称之为无状态组件(stateless组件),简单地说,就是不会与用户产生交互,或者发送异步请求。

2.什么是有状态组件?

如果组建创建后会根据用户的不同交互产生不同的行为(如更改样式),这一类组件我们称之为有状态,组建处于那种状态是由用户决定。

3.state属性是什么?

组件内部通常会维护一个状态,这个属性就是state,和

组件的样式

1.样式style属性的值只能是对象,不能为style添加字符串的值

2.Font-size这类要用驼峰式

3.Css3前缀的属性第一个字母要大写

4.组件中定义一个虚拟dom我们都要用对象,并且可以使用变量,变量当中可以使用表达式。

时间: 2024-08-02 02:49:10

react自学笔记总结不间断更新的相关文章

斯坦福大学机器学习(Andrew [email protected])--自学笔记

今天学习Andrew NG老师<机器学习>之6 - 6 - Advanced Optimization,做笔记如下: 用fminunc函数求代价函数最小值,分两步: 1.自定义代价函数 function [jVal,gradient] = costFunction(theta)jVal = (theta(1)-5)^2 + (theta(2)-5)^2;gradient = zeros(2,1);gradient(1) = 2*(theta(1)-5);gradient(2) = 2*(the

CloudStack中文文档翻译规范--不间断更新

目前CS中文文档翻译工作稳步进行中,但安装指南翻译完成后发现些许问题,大多为翻译规范问题,为了解决该问题,遂整理出CS中文文档翻译规范供各位翻译官查阅. 特殊格式翻译时注意事项: 进行CS文档翻译时,时常会在翻译时看到特殊格式的条目,以下表格按类型分类描述哪些特殊类型的格式该如何翻译. 类型 原文示例(翻译前) 正确格式示例(翻译后) 注意 字体加粗 **Path.** The exported path from the server. **路径.** 服务器输出的路径. **xxx** 必须

CSS自学笔记(3):CSS样式表的使用

当浏览器读到一个样式表时,浏览器会根据这个样式表来格式化html文档,从而表现出各式各样的网页. 想要浏览器读到样式表,有三种方法: 1.外部样式表 外部样式表可以理解为.CSS文件.当多个页面使用同一个样式的时候,外部样式表是一个很理想的选择. 在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观,无需在调整html文件,尤其是多个页面使用同一个样式的时候. 每个html页面使用标签<link>来连接外部样式表: <head> <link rel="

python自学笔记

python自学笔记 python自学笔记 1.输出 2.输入 3.零碎 4.数据结构 4.1 list 类比于java中的数组 4.2 tuple 元祖 5.条件判断和循环 5.1 条件判断 5.2 循环 6.使用dict和set 6.1 dict 6.2 set 7.函数的使用 7.1函数返回多个值,同时接受多个值 7.2函数参数的默认值 7.3可变参数的函数 7.4可变个数带参数名的入参 7.5参数类型组合 8.关于函数递归 9.python的高级特性 9.1切片 9.2遍历 9.3列表生

CSS自学笔记(5):CSS的样式

CSS中拥有各种各样的样式表,而基本的样式有背景,文本,字体,链接,列表,表格,轮廓. 一.CSS-背景 CSS中允许用纯色背景,也允许用图片来创建复杂的个性背景. p {background-color: #000;} 是用纯色作为背景.这时你可以定义其他属性,生成不同效果的背景. CSS中也可以用图片作为背景,这是就需要使用background-image属性了,如果属性值为一个URL值,并且图片文件存在,那么就可以看到用该图片做为背景的网页了 body {background-image:

Android自学笔记-16-任务栈

题目链接:http://acm.fzu.edu.cn/problem.php?pid=2170 贴个baka爷的代码留念.. 数据出的有问题,输入的字符串长度不超过1000 #include<iostream> #include<cstdio> #include<cstring> #include<string> #include<algorithm> #include<map> #include<queue> #incl

Hadoop自学笔记(一)常见Hadoop相关项目一览

本自学笔记来自于Yutube上的视频Hadoop系列.网址: https://www.youtube.com/watch?v=-TaAVaAwZTs(当中一个) 以后不再赘述 自学笔记,难免有各类错误纰漏.请看者谨慎. Hadoop的使用还有大数据时代什么的就不说了.Hadoop不是一个单独的工具,而是一整个生态系统.包括一系列工具.所以首先要先介绍一下Hadoop相关的工具和各类概念,是以后经常会接触到的. 1. Hadoop Core a) HDFS  Hadoop分布式文件系统,Hadoo

jQuery:自学笔记(5)——Ajax

jQuery:自学笔记(5)--Ajax 使用Ajax快捷函数 说明 出于简化AJAX开发工作的流程,jQuery提供了若干了快捷函数. 实例 1.显示 test.php 返回值(HTML 或 XML,取决于返回值). $.get("test.php", function(data){   alert("Data Loaded: " + data); }); 2.向页面 test.php 发送数据,并输出结果(HTML 或 XML,取决于所返回的内容): $.pos

jQuery:自学笔记(2)——jQuery选择器

jQuery:自学笔记(2)--jQuery选择器 基本选择器 说明 jQuery的基本选择器与CSS的选择器相似: 实例 标签选择器 //使用标签选择器更改字体大小 $(div).css('font-size','18px') ID选择器 //使用id选择器改变背景颜色 $('#div1').css('background','red'); 说明:ID选择器中,ID前面必须加一个#,以表明这是一个jQuery的ID选择器. 类选择器 //使用类选择器设置字体样式 $('.spanclass')