react入门到进阶(一)
一、何为react
Facebook在F8会议上首次提出这个概念,一套全新的框架就此诞生。
- React 不是一个完整的 MVC、MVVM 框架,其只负责 View 层
- React 跟 Web Components 不冲突
- React 的特点就是“轻”,数据单向绑定,独立、小巧、快速、创新
- 组件化的开发思路,小组件构成大组件,高度可重用
而react则广泛应用于
- 复杂场景下的高性能
- 重用组件库,组件组合
二、react组件基础
1、react虚拟dom概念
当一个数据改变时,而你又需要将它实时反应到UI上时,你就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,于是我们在app源码和DOM之间加入了虚拟DOM(Virtual DOM)。
所以在React中,render执行的结果得到的并不是真正的DOM节点,结果仅仅是轻量级的JavaScript对象,我们称之为virtual DOM
。
虚拟DOM是React的一大亮点,具有batching(批处理)和高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面,由虚拟 DOM来确保只对界面上真正变化的部分进行实际的DOM操作。如果没有 Virtual DOM
,简单来说就是直接重置 innerHTML。这样操作,在一个大型列表所有数据都变了的情况下,还算是合理,但是,当只有一行数据发生变化时,它也需要重置整个 innerHTML,这时候显然就造成了大量浪费。
2、react组件
先来个小例子看看什么是react组件,创建一个js文件
import React from 'react';
import ReactDom from 'react-dom';
export default class ComponentHeader extends React.Component{
render(){
return(
<header>
<h1>yondu is a good father</h1>
</header>
)
}
}
这个文件就创建了一个名为ComponentHeader
的组件,值得注意的是export default
是可以让这个组件外用。
然后我们在一个项目的入口文件里引用这个组件
var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';//组件文件的相对位置
class Index extends React.Component {
render(){
return(
<ComponentHeader/>
);
}
}//创建可以用ComponentHeader组件的组件Index
ReactDOM.render(<Index/>,document.getElementById('example'));//把你创建的组件在id为example的dom中使用
当然在render
中,你也可以用一个参数的形式,它的作用是可以用于判断,例如
var component = <ComponentHeader/>//在render中,就可以直接用component代替<ComponentHeader/>
//所以可以有以下形式
if(ture){
component = <ComponentHeader/>
}
else{
component = <ComponentFooter/>
}
以上例子就是创建一个组件然后使用的过程,需要注意的地方是
- 组件的
return
函数里返回的html节点只能是一个,如有多个,可以在外面包一个<div></div>
- 如果想让组件外用,加上
export default
3、JSX内置表达式
三元表达式是JSX里面经常使用的一种语法,我们先来看一看
render(){
var text="不为空";
return(
<p>{text == "" ? "内容为空" : "内容为"+text}/p>
)
}
首先表达式要用{}
包裹,然后三元表达式主要是看三元运算符,语法是 条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。
(b == 5) ? a="true" : a="false";
在JSX中用动态绑定时,参数需要用{}
包裹,而且外面不需要用引号,例如
render(){
var bool=true;
var name="点一下";
return(
<input type="button" value={name} disabled={bool}>
)
}
JSX中的注释是这样{/*注释*/}
的形式
4、生命周期
可以利用生命周期函数做到钩子函数(Hook)的很多功能
- 列表项
- component instantiated 组件初始化
- getDefaultProps( ) 获取默认属性的生命周期函数
- getInitialState( ) 获取初始化
State
的函数 - componentWillMount( ) 组件将要加载
- render( ) 渲染
- componentDidMount( ) 组件加载完毕(第一次render( )完毕后)
- props changed 属性更改
- componentWillReceiveProps( )
- shouldComponentUpdate( )
- componentWillUpdate( ) 组件将要更新
- render( )
- componentDidUpdate( ) 组件更新完毕(第一次render( )完毕,等组件加载完毕)
- setState( )
- component deleted
- componentWillUnmount( ) 组件卸载函数 (第一次render( )完毕,等组件更新完毕)
我们可以看看
var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
class Index extends React.Component {
componentWillMount(){
//直接写逻辑
console.log("Index组件将要加载的时间");
}
render(){
return(
<ComponentHeader/>
);
}
componentDidMount(){
//直接写逻辑
console.log("Index组件加载完毕的时间");
}
}
ReactDOM.render(<Index/>,document.getElementById('example'));
生命周期函数的运用如上就可见一斑了。
react入门到进阶(一)的更多相关文章
- react 入门与进阶教程
react 入门与进阶教程 前端学习对于我们来说越来越不友好,特别是随着这几年的发展,入门门槛越来越高,连进阶道路都变成了一场马拉松.在学习过程中,我们面临很多选择,vue与react便是一个两难的选 ...
- react入门到进阶(二)
一.react属性与事件 1.State属性 State,翻译过来是状态的意思,所以它就代表着组件的状态.React把用户界面(UI)当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界 ...
- react入门到进阶(三)
一.react样式 1.内联样式 在以前写html+css的时候,引入css的时候有一种方法就是内联,而在react中又有些不一样,样式是用变量的形式,如下 const styleComponentH ...
- Weex入门与进阶指南
Weex入门与进阶指南 标签: WeexiOSNative 2016-07-08 18:22 59586人阅读 评论(8) 收藏 举报 本文章已收录于: iOS知识库 分类: iOS(87) 职 ...
- react入门(3)
在第一篇文章里我们介绍了jsx.组件.css写法 点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环 点击查 ...
- react入门(1)
这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...
- react入门(2)
接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...
- react入门(4)
首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...
- React 入门实例教程(转载)
本人转载自: React 入门实例教程
随机推荐
- Android实现购物车功能
如图: 主要代码如下: actvity中的代码: publicclassShoppingCartActivity extendsBaseActivity { private List< ...
- 企业微信开发之发放企业红包(C#)
一.企业微信API 地址:http://work.weixin.qq.com/api/doc#11543 二.参数说明 1.发送企业红包 请求方式:POST(HTTPS)请求地址:https://ap ...
- shell脚本学习(一):shell脚本开发的基本规范和习惯
1.脚本第一行指定脚本解释器 #!/bin/bash 或 #!/bin/sh 2.脚本开头增加作者.脚本作用描述等信息 1 #!/bin/bash 2 #Author: iskylite 3 #Blo ...
- Asp.net MVC4高级编程学习笔记-模型学习第五课MVC表单和HTML辅助方法20171101
MVC表单和HTML辅助方法 一.表单的使用. 表单中的action与method特性.Action表示表单要提交往那里,因此这里就有一个URL.这个URL可以是相对或绝对地址.表单默认的method ...
- Connect the Cities(prim)用prim都可能超时,交了20几发卡时过的
Connect the Cities Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- JsDoc脚本注释文档生成
使用jsDoc可使用特定注释,将注释的内容生成文档,可用于生成脚本库的API文档 jsdoc 文档: http://usejsdoc.org/
- 【框架学习与探究之日志组件--Log4Net与NLog】
前言 本文欢迎转载,作者原创地址:http://www.cnblogs.com/DjlNet/p/7604340.html 序 近日,天气渐冷,懒惰的脑虫又开始作祟了,导致近日内功修炼迟迟未能进步,依 ...
- IE (6-11)版本,在使用iframe的框架时,通过a标签javascript:; 和js跳转parent.location的时候 出现在新页面打开的情况
问题描述: 使用iframe的情况下,在子框架中,使用如下形式的跳转: <a href="javascript:;" onclick="parent.locatio ...
- 转:ef获取某个表中的部分字段值
我有个新闻表 id,title,body,createtime,author,click 使用ef4.1 仅仅读取 id,title,createtime 并显示在页面上. public static ...
- mysql查询锁表及解锁
SHOW PROCESSLIST; KILL ; 锁表网上解释: 这牵涉到mysql的事务,简单通俗的话,就这样给你解释有一个任务序列控制sql语句的执行,第一次有select的语句查询表a,mysq ...