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)的很多功能

  1. 列表项
  2. component instantiated 组件初始化
    • getDefaultProps( ) 获取默认属性的生命周期函数
    • getInitialState( ) 获取初始化State的函数
    • componentWillMount( ) 组件将要加载
    • render( ) 渲染
    • componentDidMount( ) 组件加载完毕(第一次render( )完毕后)
  3. props changed 属性更改
    • componentWillReceiveProps( )
    • shouldComponentUpdate( )
    • componentWillUpdate( ) 组件将要更新
    • render( )
    • componentDidUpdate( ) 组件更新完毕(第一次render( )完毕,等组件加载完毕)
  4. setState( )
  5. 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'));

生命周期函数的运用如上就可见一斑了。

相关推荐