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的精髓——函数式编程也节省了很多冗余代码的编写,便于测试。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值