Eeact 组件

React简介和组件的介绍

• React简介
• React组件
• 个人总结

---

1. React简介 - React主要有三个不同于其他框架的特点：

• 专注视图层
  React与其他框架最明显的不同是React专注于提供view层解决方案，它并不是一个完整的MVC/MVVM框架，不仅仅如此，它还是一个包含View和Controller的库。对于复杂的应用，可以根据应用场景自行选择业务层框架，并根据需要搭配 Flux、Redux、GraphQL/Relay 来使用。

• 虚拟DOM树
  相比较传统的页面开发需要每次更新都重新操作DOM相比，React做出了很大的优化，它把真实 DOM 树转换成 JavaScript 对象树（虚拟DOM），每次更新时，会重新计算虚拟DOM并与上一次的进行比较，只更新变化的部分。而且React的生命周期之一shouldComponentUpdate也是通过只更新变化的部分来减少DOM消耗、优化性能。

• 虚拟DOM树
  函数式编程是React的精髓。所谓函数式编程就是构建一个规则以去减少冗余的代码，而这个规则可以被反复的使用。React可以将需要重复构建的UI过程抽象为组件，根据传入参数的不同区渲染不同的页面。

2.React组件

React组件基本上由组件的构建方式、组件内的属性状态与生命周期方法组成。

• 组件的传值
  a:父组件传值子组件:

在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到这个param的值。
父组件向子组件传值，通过props，将父组件的state传递给了子组件。
父组件代码片段：

import React from 'react';
import ReactDOM from 'react-dom';
import User from './User';//引入子组件

//定义数据
const person = {
    name: 'Tom',
    age:20
}

ReactDOM.render(
    //渲染子组件，并向子组件传递name,age属性
    <User name={person.name} age={person.age}></User>
    , document.getElementById('root'));

b:子组件传值父组件:
子组件通过调用父组件传递到子组件的方法向父组件传递消息的。
子组件 Son.js 文件代码示例：

  import React from 'react';

class Son extends React.Component {
    //构造方法
    constructor(){
        super();
        this.state = {
            inputValue:''
        }
    }
    //按钮点击事件
    handleClick(){
        //通过props属性获取父组件的getdata方法，并将this.state值传递过去
        this.props.getdata(this.state.inputValue);
    }
    //输入框事件，用于为this.state赋值
    handleChange(e){
        this.setState({
            inputValue: e.target.value
        });
    }

    render(){
        return (
            <React.Fragment>
                <input onChange={this.handleChange.bind(this)}></input>
                <button onClick={this.handleClick.bind(this)}>点击获取数据</button>
            </React.Fragment>
        );
    }

}

export default Son;

c:兄弟组件传值
兄弟组件之间的传值，是通过父组件做的中转 ，流程为：
组件A – 传值 --> 父组件 – 传值 --> 组件B
代码示例：
创建 Acls.js 组件，用于提供数据

import React from 'react';

class Acls extends React.Component {
	//按钮点击事件，向父组件Pcls.js传值
    handleClick(){
        this.props.data("hello...React...");
    }

    render(){
        return (
            <button onClick={this.handleClick.bind(this)}>Acls组件中获取数据</button>
        );
    }
}

export default Acls;

创建父组件 Pcls.js 用于中转数据

import React from 'react';
import Acls from './Acls';
import Bcls from './Bcls';

class Pcls extends React.Component {
	//构造函数
    constructor(){
        super();
        this.state = {
            mess: ''
        }
    }
	//向子组件Acls.js提供的传值方法，参数为获取的子组件传过来的值
    getDatas(data){
        this.setState({
            mess: data
        });
    }

    render(){
        return (
            <React.Fragment>
                Pcls组件中显示按钮并传值：
                <Acls data={this.getDatas.bind(this)}></Acls>
                <Bcls mess={this.state.mess}></Bcls>
            </React.Fragment>
        );
    }
}

export default Pcls;

   

创建子组件 Bcls.js 用于展示从 Acls.js 组件中生成的数据

import React from 'react';

class Bcls extends React.Component {

    render(){
        return (
            <div>在Bcls组件中展示数据：{this.props.mess}</div>
        );
    }
}

export default Bcls;

• 组件的构建方式
  a.React.createClass:
  b.ES6 classes创建类
  c.无状态函数（只传入props和context）

3.个人总结

个人对于React的部分基本概念有了更全面的认识，在此之前，我其实一直不太清楚React与其他框架比如Vue、Angular,现在我认识到了：
　1. React最大的好处就是它的跨平台优势，react-native能让你用相同的组件模型编写有本地渲染能力的 APP (iOS 和 Android)。还能同时跨平台开发。
　2. React很灵活，它的虚拟DOM的概念很大程度提高了性能优化和资源节约，这一点和Vue相似。而且React的精髓——函数式编程也节省了很多冗余代码的编写，便于测试。