react功能实现-组件创建

这里主要从两个角度来分析创建一个组件需要怎么做,一个是元素,一个是数据.整理向,大量借鉴,非原创.

1.渲染组件.

我们先明确一点,所有的元素都必须通过render方法来输出渲染.所有,每个组件类最终都必须通过render来输出.

2.创建组件.

目前有三种创建组件的方法:

(1)函数式定义的无状态组件.

function HelloComponent(props, /* context */) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />,document.getElementById("mountNode")) 

(2)es5原生方式React.createClass定义的组件

var InputControlES5 = React.createClass({

    render: function() {
        return (

        );
    }
});

(3)es6形式的extends React.Component定义的组件

class InputControlES6 extends React.Component {

    render() {
        return (

        );
    }
}

三种方式的大概区别:

a:第一种创建无状态组件,只负责渲染传入的值,而自身没有状态改变这么一说.而另外两种是有状态的.

b:React.createClass和extends React.Component的区别主要有四方面.

前者自动绑定所有函数的this,后者需要手动绑定.

设置默认配置的方式不一样.

设置初始状态的方式不一样.

前者支持Mixins,后者不支持.

目前官方更支持extends React.Component,所以接下来我选择extends React.Component作为创建方式.

3.组件数据.

这个数据范畴实际上特别大,但是本篇文章以用为主,所以在此我把它分成两个方面,不特意展开,也不具体讨论.一个是外界传入的this.props和内部的状态this.state.

(1)this.state

我们假设一个场景,假如有一个按钮,现在是红色,点击之后要变成黑色,再点击就变回来.那我们怎么做?

判断是不是红色,是的话,点击就变黑.同理,变红也是.

那我们怎么判断?

需要一个变量,红色是一个值,黑色是另一个值.然后根据这个变量来改变按钮的颜色.

这个变量是什么?

this.state

怎么用?

初始化

class Button extends React.Component {
constructor(props) { 
//构造函数初始化this.props
 super(props); 
// 设置color的初始值
this.state = {
 color: red;
 };

    render() {
        return (
            <div className="colorButton">Hello</div>
        );
    }
}

更改state

必须调用setState()来修改state,因为用了setState()之后当this.state的数值发生变化时会调用render()重新渲染一遍元素,从视觉上才能看到效果.

this.setState({color:black})

再结合点击事件

class Button extends React.Component {
constructor(props) { 
//构造函数初始化this.props
 super(props); 
// 设置color的初始值
this.state = {
 color: red;
 };
//点击事件
colorChange(color){ 
color==red?this.setState({color:black}):this.setState({color:red});
 }
    render() {
        return (
    //之前有说过,这个创建组件的方式需要手动绑定函数的this,这是其中一种绑定方式
            <div className={this.state.color==red?"redBg":"blackBg"} onClick={this.colorChange(this.state.color).bind(this)}>Hello</div>
        );
    }
}

目前为止,我们的组件拥有了根据自身状态(this.state.color)来展示不同的效果的功能.

(2)this.props

目前为止,可知this.state是组件内部自身的状态,它可以在组件内部初始化以及修改.但是,目前为止我们并没有从外界接收数据,比如,这个按钮里面的内容并不是写死的,而是外界给的,老大说你不能只写"hello",而是我给你什么你展示什么,所以我们需要从外界接收要展示的内容.这里就需要一个通道.

我们先得知道组件的使用.

入口:

//导入组件,注意组件名必须是大写字母开头的
import Button from "路径"
//这里在自定义组件中可以以属性名和属性值的形式传入组件内部,也就是所谓的入口.所有的属性值和属性名会自动添加到组件内部可以拿到的this.props中
ReactDOM.render(<Button text="你好" />, document.getElementById("mountNode")) 

出口:

class Button extends React.Component {
constructor(props) {
//构造函数初始化this.props
 super(props);
// 设置color的初始值
this.state = {
 color: red;
 };
//点击事件
colorChange(color){
color==red?this.setState({color:black}):this.setState({color:red});
 }
    render() {
//从this.props中拿到我们要的值
const {text} = this.props;
        return (
    //之前有说过,这个创建组件的方式需要手动绑定函数的this,这是其中一种绑定方式                                                     使用我们的拿到的值
            <div className={this.state.color==red?"redBg":"blackBg"} onClick={this.colorChange(this.state.color).bind(this)}>{text}</div>
        );
    }
}

这样就是一个完整的通道了,中间借用this.props来串联起来不同的组件,实现数据的传递.当然嵌套组件也可以用同样的方式来实现数据的传递,在子组件中以属性的形式传给他自己的子组件.

这就是一个功能基本完整的的初级组件了,当然涉及到跨组件传值、传入验证之类的功能暂且先不提,至少目前我们能做出一个组件来了.