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. Django实例

    更新:今年8月在深圳和嵩天老师居然见面了,很开心.嵩天老师很和蔼. =========== 今天看了嵩天老师的视频,感觉讲的很好,于是看着视频自己做了一个初步的实例认识. 步骤1,新建一个Web框架 ...

  2. 执行Android后台任务的最佳实践

    灵活执行后台任务可以帮助提升应用性能,并最小化电量损耗. Android后台任务主题包含以下三个子主题: 1. 在IntentService中执行后台任务: 2. 使用CursorLoader在后台加 ...

  3. 使用CSS达到文字首尾对齐效果

    在制作表单的时候经常会遇到需要不同个数的文字首尾对齐,比如: <span>姓名:</span> <span>联系方式:</span> 姓名: 联系方式: ...

  4. Java 中关于基本数字类型的注意事项

    局部变量需初始化才能访问 public void test() { float n; n = n + 1; } 窄化导致自增异常 short i = 3; i += 1; // 不提升 short i ...

  5. postgresql----JOIN之多表查询

    JOIN用于多张表的关联查询,如SELECT子句(SELECT A.a,A.b,B.a,B.d)中既有表A的字段,同时还有B表的字段,此时使用单独使用FROM A或FROM B已经解决不了问题了,使用 ...

  6. HAProxy 实现 mysql 负载均衡

    通过yum 安装和配置HAProxy # yum install -y haproxy     #安装haproxy # rpm -qa | grep haproxy     #查看安装的haprox ...

  7. ASP.NET Core 集成测试中结合 WebApplicationFactory 使用 SQLite 内存数据库

    SQLite 内存数据库(in-memory database)的连接字符串是  Data Source=:memory: ,它的特点是数据库连接一关闭,数据库就会被删除.而使用  services. ...

  8. CentOS最基本的20个常用命令

    1. man 对你熟悉或不熟悉的命令提供帮助解释eg:man ls 就可以查看ls相关的用法注:按q键或者ctrl+c退出,在linux下可以使用ctrl+c终止当前程序运行. 2. ls 查看目录或 ...

  9. RobotFramework环境配置:默认以管理员权限运行cmd

    设置cmd以管理员权限运行 目的:创建或删除文件等命令时,需要管理员权限运行cmd(linux以root用户登录).   例如,创建日志目录.   方法一: 1.激活administrator用户 2 ...

  10. [05-02]红帽linux常用操作命令

    命令怎么用(三种方式) shutdown --help shutdown --? man shutdown  (man 就是manual  手册, 指南) 服务 service 怎么知道服务的名字呢? ...