react功能实现-组件创建

「爱情、让人受尽委屈。」 2021-11-23 17:10 313阅读 0赞

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

**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})

再结合点击事件

目前为止,我们的组件拥有了根据自身状态(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来串联起来不同的组件,实现数据的传递.当然嵌套组件也可以用同样的方式来实现数据的传递,在子组件中以属性的形式传给他自己的子组件.

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

转载于:https://www.cnblogs.com/Shyno/p/11092523.html