alogy
alogy

React

React简介

FeceBook开源的一套框架，专注于MVC的视图V模块。实质是对V视图的一种实现。

React框架的设计没有过分依赖于某个环境，它自建一套环境，就是virtual DOM（虚拟DOM）。

提供基础API：创建元素，渲染元素。

React的独特之处：

组件的组合模式，单向数据流的设计(Date Flow)，高效的性能(Virtual DOM)，分离的设计

React的核心思想：封装组件，各个组件维护自己的状态和 UI, 当状态变更，自动重新渲染整个组件。

浏览器环境中渲染

react.js： 构建虚拟DOM， React.createElement(); React核心库，在应用中必须先加载核心库。
react-dom.js: 将虚拟DOM渲染页面中，ReactDOM.render(); DOM渲染器，React将核心库和渲染器分离，目的：在Web页面中显示开发的组件。

JSX

JSX是React自定义的语法，最终JSX会转化为JS运行与页面当中

组件

组件是React中核心概念，页面当中的所有元素都通过React组件来表达，将要写的React代码绝大部分都是在做React组件的开发。

组合模式： 组合模式又称之为：部分-整体模式。使树形结构的问题中，模式了简单元素和复杂元素的概念，客户程序可以向处理简单元素一样来处理复杂的元素，从而使得客户程序与复杂元素的内部结构解耦。

无论是应用等级还是一个表单亦或是一个按钮，都视为一个组件。然后基于组件的组合构建整个应用。

React_第1张图片

组合模式优点：

  • 构建可以重用的组件：组件的开发能够形成公司的组件，每个业务的开发都能积累课重用的组件。

  • JSX语法

  • 具有弹性的架构： 能够构建简单的页面也能构建大型的前端应用。

  • 维护性高。

VIRTUAL DOM

React抽象出来的虚拟DOM树，虚拟树是React高性能的关键。（让需要改变的元素才去重新渲染）

单项数据流

单项数据流：one-way reactive data flow

React应用的核心设计模式，数据流向自顶向下。

页面的UI和数据的对应是唯一的。

基础API

createElement

React.createElement();

创建虚拟DOM

参数1：元素名称， 例如: div,p, h1
参数2：属性集合，例如：title，calssName，id，style
从参数3开始，表示该元素的子元素，通常这些元素通过createElement();创建， （文本文件可以直接插入）

let ul = React.createElement('ul', {
    
    'title': '嘻嘻哈哈'
    
},'这是');

render

ReactDOM.render();
DOM渲染器，将元素渲染到页面中。

参数1：虚拟DOM元素
参数2：HTML的容器元素。

ReactDOM.render(ul, document.querySelector('.app'));

示例：

crateClass

React.createClass();
定义组件

参数：配置对象。
对象中可以添加任何方法，但一些属性，方法是特殊的。

render: 组件中渲染输出的虚拟DOM元素。


// component
let Uls = React.createClass({
    render: function () {
        
        return React.createElement(
            'ul',
            null,
            React.createElement(
                'li',
                null,
                'a'
            ),
            React.createElement(
                'li',
                null,
                'b'
            ),
            React.createElement(
                'li',
                null,
                'c'
            )
        )
        
    }
});

// 组件变成虚拟DOM
let ul = React.createElement(Uls, null);

// 渲染页面
ReactDOM.render(ul, document.querySelector('.app'));

JSX语法

创建JSX语法的本质：使用基于XML的方式表达组件嵌套，保持和HTML一致的结构。最终所有的JSX都会编译为原生JavaScript

嵌套规则：标签可以任意嵌套。标签闭合，必须严格闭合，否则无法编译通过。

编译JSX语法：
工程化工具：fis-parse-babel2


fis.match('**.jsx', {
    parser: fis.plugin('babel2'),
    rExt: '.js'
});


// 渲染HTML内部的JSX语法

fis.match('**.html:jsx', {
    parser: fis.plugin('babel2')
});

JSX示例：


// 创建组件
let Uls = React.createClass({
    render: function () {
        return (
            
    
                
  • a
    • 
                
  • b
    • 
                
  • c
    • 
            

        );
    }
});


// 渲染组件成 虚拟DOM
let ul = ();

// 渲染页面中
ReactDOM.render(ul, document.querySelector('.app'));

HTML内部JSX语法

组件大致分类

  • APP 组件： 整个页面的最完整组件

  • Header 组件： 头部输入组件

  • TodoList组件： 列表组件

  • TodoItem 组件： 列表项

  • Footer 组件： 底部操作组件

虚拟DOM属性

为虚拟DOM添加属性，传递属性的方式和HTML相同。

属性可以是字符串，也可以是任意的JavaScrip变量。需要使用插值方式解析变量。

特殊属性：
class，要使用成className
for， 要使用成htmlFor

// 创建组件
let Uls = React.createClass({
    render: function () {
        return (
            
    
                
  • a
    • 
                
  • b
    • 
                
  • c
    • 
            

        );
    }
});

对HTML组件

fuunction render () {
    return 
Hello

}

React自定义组件

fuunction render () {
    return 

}

JSX花括号

插值形式，动态的改变虚拟DOM中属性值，或者内容，或使用JavaScript表达式，做简单的运算。

语法： {表达式}

  
'use strict';

// Component
let Header = React.createClass({
    render: function () {
        
        let userName = 'cyan';
        let date = new Date();
        
        return (
            

                

                    

                        {userName}
                         
                        {date.getHours() > 12 ? '下午' : '上午'}    
                    

                

            
    
        );
    }
});

// 渲染
ReactDOM.render(
, document.querySelector('.app'));

JSX注释

let Header = React.createClass({
    render: function () {
        {/* 这里是注释 */}
    }
});

Component

props属性

组件中特殊属性：props
作用：获取组件上添加的属性。

设置默认的属性，通过getDefaultProps()来设置，是React内置方法名，在自定义方法的时候，不能重写。

  • this.props : 获取属性值

  • geetDefaultProps(); : 获取默认属性对象，会被调用一次，当组件类创建的时候会被调用，返回值会被缓存起来，当组件被实例化过后如果传入的属性没有值，会返回默认值属性值。

  • this.props.children : 子节点属性

  • propTypes ： 属性类型检查

一般的，props规定是只能读取，应该禁止被修改。
原因： React 不能帮检查属性类型(propTypes)，修改props对象可能会导致预料之外的结果。

属性数据的单项性

React的单项数据流模式，数据的流动管道就是 props，流动的方向就组件的层级自顶向下的方向。所以一个组件是不能修改自身的属性，组件的属性一定是通过父组件传递而来(或默认属性)

'use strict';

// Component
let Prat = React.createClass({
    
    getDefaultProps: function () {
        return {
            title: ['默认标题']
        }
    },
    
    createLi: function () {
        
        return this.props.title.map( ( val, idx ) => {
            return (
  • { val }
    • );
        } );
        
    },
    
    render: function () {
        
//                    console.log( this.props.children );
        
//                    console.log( this.props );
        return (
            
    
                
      
                    {this.createLi()}
                
    
            
    
        );
        
    }
    
});

// 渲染
ReactDOM.render(, document.querySelector('.app'));
ReactDOM.render(, document.querySelector('.app1'));

    style

    设置style的样式

    • 普通的CSS样式， 遵循驼峰式命名规则

    • CSS3样式，遵循大驼峰式命名规则

    注意：样式并不能像HTML行内一样，需要使用插值方式,插值中使用对象。

    
'use strict';

// Componedt
let Style = React.createClass({
    
    render: function () {
        
        let sty = {
            color: 'red',
            border: '1px solid #000',
            borderBottom: '2px solid tan'
        }
        
        return (
            
    
                title
                
    titile2
    
            
        );
        
    }
    
});

// 渲染
ReactDOM.render(