React 学习笔记

1、react 使用JSX语法来描述html,位于花括号的值会被当做一个JavaScript表达式进行求值

2、props是组件的不可变属性,有个重要属性:children,可以使用props.children来引用位于前置标签和后置标签之间的内容

3、state 组件所有可变的属性存储在state中。当state被修改时,组件会触发响应式渲染,组件自身及其子组件都会被重新渲染

4、react中的事件:react为了高效,将事件处理从节点拿出来,统一放在文档根节点进行处理,当事件发生时会将事件映射到对应的组件去渲染。

5、react中的属性采用驼峰式大小写原则(“onClick” 而非"onclick")

6、JSX是react对JavaScript的扩展,用于在js中编写声明式XML风格语法,JSX有一组类似HTML的XML标签,转义后JSX会被转换为针对Reat库的调用。例如
<h1> hello world </h1>
会被转义为

React.createElement("h1", null, "Hello world") 

7、JSX与HTML的不同之处:
1) 标签名采取驼峰式命名规范 2)所有元素必须闭合 3)标签名基于DOM api,而不是html语言规范,其中一个例子是class vs className
普通的html:

<div class="some-class"> </div>

而JSX却是

<div className="some-class"> </div>

8、JSX的特异之处
1)单一根节点
2)不支持if 语句,有类似需求使用三元问号表达式
3)JSX中的注释必须使用花括号({})括起来
4)React内置了XSS攻击保护措施,意味不可以动态动态生成html标签附加到JSX中。如果必须这样做,可以通过dangerouslySetInnerHtml属性来跳过XSS保护

9、react表单内的组件有两种类型:受控组件和非受控组件
1)受控组件:组件的值由外部传入,内部不可以改变组件的值
2)非受控组件:组件不为任何输入域提供值,渲染后的元素值直接反应用户的输入

10、React 虚拟DOM
众所周知,操作DOM是一个耗时操作,为了提高性能,react实现了一个虚拟DOM,用户所有的修改都是直接操作虚拟DOM。为了保持真实DOM和虚拟DOM的一致,需要找出两者之间的最小变化量,这一过程称为子级校验。
1)key属性,再需要进行插入、删除、替换和移动时可以快速找到组件
2)refs属性,如果必须和真实DOM打交道,可以通过refs属性来操作真实DOM

原文地址:https://www.cnblogs.com/graph/p/8232449.html

时间: 2024-10-12 08:01:29

React 学习笔记的相关文章

React学习笔记 - 组件&amp;Props

React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你就只需专注于构建每一个单独的部件. 组件接收props,返回react元素. 1. 函数定义\类定义组件 最简单组件方式 - 函数定义组件: // 函数定义组件 function Welcome(props) { return <h1>Hello, {props.name}!</h1>

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

什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似.react是Facebook官方推出的一个javascript的库,现在已经有了非常多的库和框架Facebook为什么还要开发一款新的框架呢?原因就是 Facebook遇到了一些新的问题.Facebook需要解决的问题是构建数据不断变化的大型应用.大型应用是什么意思?数据不断变化带来什么问题呢? 

React学习笔记---项目构建

简介 ReactJs由于有FB的支持,得到了社区的极大关注,同时由于ReactJs只希望专一的做好View层次上的工作,所以本身并没有涉及很多周边工具. 今天要介绍一款工具,同时包含一个构建项目模板的工具,对于初学者来说,就有了一个可以学习.开发.测试的平台. Yeoman 官方的介绍是这样形容的:“Web App的脚手架工具” --- Yeoman的目的是帮助用户更好的启动项目,提供最好的实践和工具使用户保持高生产率. Yeoman提供了一个生成器的生态系统,并提供了一个“Yeoman的工作流

react学习笔记1

# 1.hello world 学习一个语言,最好的方式,我们需要去官网去查看文档(https://facebook.github.io/react),通过JSFiddle,便可以看到最简单的demo.目前为止最新版本为15.3.0,后续没有特别说明,我们都是基于该版本. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

react学习笔记(一)

在开篇之前,先来说说选择react的初衷. 一个初学者,在开始选择深入了解一个框架之前,我查阅了一些资料,做出了对三大框架的一些基本分析. 1.数据流.Vue和Angular都是支持双向数据绑定,也就是在界面的操作能实时反映到数据,数据的变更能实时显示在界面上.Vue默认为单向数据绑定.React支持单向数据绑定,也就是说给定一个原始的页面,之后添加一些组件化操作,得到一个变化后的页面. 2.组件化.Vue和React都支持组件化.组件,即对一些数据和方法的封装,它可以用来构建用户页面,并通过任

React 学习笔记(学习地址汇总)

好的博文地址:http://www.ruanyifeng.com/blog/2015/03/react.html 官网学习地址:http://facebook.github.io/react/docs/getting-started.html JSX语法地址:http://facebook.github.io/react/docs/displaying-data.html#jsx-syntax

react学习笔记4

<header class="site-header jumbotron"> <div class="container"> <div class="row"> <div class="col-xs-12"> <h1>欢迎来到妙味课堂</h1> <p class="lead">妙味课堂是一支独具特色的IT培训团队,妙味反对传

react学习笔记3

<div id="demo"></div> <script type="text/babel"> var ItemComponent = React.createClass({ render:function (){ return ( <li>{this.props.item}</li> ) } }); var ListComponent = React.createClass({ render:funct

React学习笔记(三) 组件传值

组件嵌套后,父组件怎么向子组件发送数据呢? 答案是: this.props <script type="text/babel"> var MyFirst = React.createClass({ getInitialState : function(){ return { myMessage: ['我是父组件data1','我是父组件data2','我是父组件data3',] } }, render : function(){ return ( <div> &

react 学习笔记 npm 命令

第一步: cnpm install --save react react-dom babelify babel-preset-react 第二步: 安装es2015 cnpm install babel-preset-es2015 --save