1.Virtual DOM

1.将网页所有内容映射到一颗树形结构的层级对象模型上,浏览器提供对dom的支持,用户可以是用脚本调用dom,api来动态修改dom节点,从而达到修改网页目的,这种修改是浏览器完成的,浏览器会根据dom的改变重新绘制改变的dom节点部分
2.修改dom重新绘制渲染的代价太高,前端框架为了提高效率,尽量减少dom的重绘,提出了Virtual DOm,所有的修改都是在Virutal DOM上进行的,通过比较算法,找出浏览器dom之间的差别,使用这个差异操作dom,浏览器只需要渲染部分变化就可以
react实现了dom diff算法可以高效对比virtual DOM和dom差异

2.jsx语法

jsx是一种javascri和xml混写的语法,是javascript的扩展
jsx规范
标签中首字母小写的就是html标记,首字母大写就是组建
要求严格的html标记,所有标记必须闭合,br应该携程<br />
单行省略小括号,多行请使用小括号
元素有多行,建以多行,注意缩进
jsx表达式:使用{}括起来,如果大括号使用了引号,会当作字符串处理

3.jsx state

import React from 'react';
import ReactDom from 'react-dom'; //缺省必须放在{}外 class Toggle extends React.Component{
state = {flag:true}
handlerClick(event){
console.log(event.target.id)
console.log(event.target === this)
console.log(this)
console.log(this.state)
this.setState({flag:!this.state.flag})//改变了state,并引起重绘;;点击触发了setstate,修改state变化了,导致render重绘
}
render(){
return (<div id="t1" onClick={this.handlerClick.bind(this)}>
click this sentense </div>) //onclick返回的还是函数,bind绑定返回函数,jsx中onClick要用小驼峰,使用括号表示
}//jsx中return 多行要用括号
} class Root extends React.Component {
state = {
p1:"python",
p2:".com"
}
render(){
this.state.p1 = "rocky"
return (<div>welcome this.state.p1{this.state.p2}
<br />
<Toggle />
</div>
)//Toggle是组件因为首字母大写,定义在别处
}
}
ReactDom.render(<Root />,document.getElementById("root")) //root是dom树,Root是react,jsx的组件,修饰tree #注释
state是私有属性,组件外无法直接访问,props是公有属性,组件外可以访问,只读

 react中的事件

使用小驼峰名明
使用jsx表达式,表达式中指定的事件处理函数
不能return false,如果要阻止默认行为,event.prevent.Default(); 鼠标放在标签上显示url,不想让其跳转

react props

import React from 'react';
import ReactDom from 'react-dom'; //缺省必须放在{}外 class Toggle extends React.Component{
state = {flag:true}
handlerClick(event){
this.setState({flag:!this.state.flag})//改变了state,并引起重绘;;点击触发了setstate,修改state变化了,导致render重绘
//setState 同步调用
}
render(){
return (<div id="t1" onClick={this.handlerClick.bind(this)}>
点击这句话会触发一个事件{this.state.flag.toString()}<br />
{this.props.name}:{this.props.parent.state.p1+this.props.parent.state.p2}<hr />
<br />
{this.props.children}
</div>) //onclick返回的还是函数,bind绑定返回函数,jsx中onClick要用小驼峰,使用括号表示
}//jsx中return 多行要用括号
} class Root extends React.Component {
state = {
p1:"python",
p2:".com"
}
render(){
this.state.p1 = "rocky"
return(
<div>
welcome {this.state.p1}{this.state.p2}<br />
<Toggle name="school" parent={this} >
<span>lslslslslslslsl</span><br />
</Toggle>
</div>)
//Toggle是组件因为首字母大写,定义在别处
}
}
ReactDom.render(<Root />,document.getElementById("root")) //root是dom树,Root是react,jsx的组件,修饰tree

无状态主键

无状态组件,也叫函数式组件
开发时候很多情况下,组件很简单,不需要state状态,也不需要使用函数生命周期,无状态组件很好了满足了需求
无状态组件函数提供了一个参数props,返回一个react元素
无状态函数本身就是render函数
import React from 'react'
import ReactDom from 'react-dom'
import { rename } from 'fs'; function Root(props) {
return <div>{prop.schoolname}</div>
}
//等同于上面的写法
let Root = props=><div>{props.schoolname}</div>
ReactDom.render(<Root schoolname='mage>'/>,document.getElementById('root'))

  

JavaScript之jsx&react的更多相关文章

  1. Facebook开源的JavaScript库:React

    React是Facebook开源的JavaScript库,采用声明式范例,可以传递声明代码,最大限度地减少与DOM的交互. React是Facebook开源的JavaScript库,用于构建UI.你可 ...

  2. 2017年 JavaScript 框架回顾 -- React生态系统

    前一篇文章中,我们介绍了2017年 JavaScript 框架的整体情况.我们也了解到在众多的前端框架中,目前最为庞大又在快速增长的当属 React 了,本文就来重点介绍 React 的生态系统. 首 ...

  3. 学习React前端框架,报错 'React' must be in scope when using JSX react/react-in-jsx-scope

    问题 import react from 'react'  改成  import React from 'react'   小写 react  改成 React

  4. 第九十三篇:ESLint:可组装的javaScript和JSX检查工具

    好家伙, 1.什么是ESLint? 代码检查工具,用来检查你的代码是否符合指定的规范 2.ESLint有什么用? 统一JavaScript代码风格的工具 在合作开发的时候, 每个成员的代码风格都有可能 ...

  5. React的使用与JSX的转换

    前置技能:Chrome浏览器   一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...

  6. 【go】脑补框架 Express beego tornado Flux reFlux React jsx jpg-ios出品

    http://goexpresstravel.com/ 今天 Express 的作者 TJ Holowaychuk 发了一篇文章,正式宣告和 Node.js 拜拜了,转向 Go 语言. Go vers ...

  7. react.js 从零开始(三)JSX 语法及特点介绍

    什么是jsx? jsx = JavaScript + xml jsx 是一种 Ecmascript 的一种新标准. jsx 是一种 带有结构性的语法. jsx 的特点: 1.类xml语法易于理解. 2 ...

  8. React文档翻译系列(三)JSX简介

    # React文档翻译系列(三)JSX简介 先来看一下下面的变量声明: ``` const element = Hello world! ``` 这种有趣的标签语法既不是字符串也不是HTML. 这种形 ...

  9. React入门---JSX内置表达式-6

    个人理解:接触的JSX就是在React中render方法里面的js,因为里面只能有一个节点,所以你写的东西都在一个div中,要有js所以通过JSX来表达.(个人菜鸟理解,欢迎指正) React 使用 ...

随机推荐

  1. Tutorial中的Hello2代码

    该hello2应用程序是一个Web模块,它使用Java Servlet技术来显示问候语和响应. 1.GreetingServlet.java源码文件: 1 @WebServlet("/gre ...

  2. 手把手教你安装nmon

    一.nmon简介 nmon是由IBM 提供.免费监控 AIX 系统与 Linux 系统资源的工具.该工具可帮助在一个屏幕上显示服务器系统资源耗用情况,并动态地对其进行更新.此外,他还可以利用 exce ...

  3. angular.isObject()

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Resource Allocation of Yarn

    关键词:yarn 资源分配 mapreduce spark 简要指南 适合不想看太多原理细节直接上手用的人. 基本原则: container分配的内存不等于机器实际用掉的内存.NM给container ...

  5. Jmeter应用-接口测试

    1.BS架构应用性能 2.HTTP协议接口功能与性能 3.FTP协议接口功能与性能 4.Mysql数据库性能 5.MongoDB数据库性能 6.支持自定义Java组件开发 测试计划-右键-添加线程组 ...

  6. php 二维数组根据值进行排序

    // 先获取要排序的值 $createTime = array_column($data, 'create_time'); // 排序成功 array_multisort($createTime, S ...

  7. iOS拼音搜索,拼音首字母搜索

    扩展了一下 搜索框,能够实现拼音和首字母模糊搜索 基本搜索 上一篇文章 #import "NSString+utility.h" @interface WJWPinyinSearc ...

  8. Cassandra最小化安装

    Cassandra最小化安装 环境 CentOS 7.2 64位 IP_address:172.27.0.8 安装包装备 [root@master ~]# ll /usr/local/src tota ...

  9. vuejs 70行代码实现便签功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. linux1

    虚拟内存:内核通过磁盘上的存储空间来实现虚拟内存,这块区域称为交换空间.内核不断交换空间和实际的物理内存之间反复交换虚拟内存中的内容 linux运行中的程序叫做进程. 内核创建了第一个进程,叫做Ini ...