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

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.createClassextends 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来串联起来不同的组件,实现数据的传递.当然嵌套组件也可以用同样的方式来实现数据的传递,在子组件中以属性的形式传给他自己的子组件.

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

react功能实现-组件创建的更多相关文章

  1. React: React组件创建的三种方式

    一.简介 在前面介绍的React组件知识中,对于组件的创建我只是用了其中某一种方式.其实,在2013年React诞生之初,对于React组件的创建,仅仅只有一种方式,也即createClass函数,在 ...

  2. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

  3. angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式

    基本语法: 动态属性: vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]= ...

  4. React Native 之 组件化开发

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  5. React数据流和组件间的沟通总结

    今天来给大家总结下React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数 ...

  6. react - 解刨组件的多种写法

    一,原始的createClass写法 对于写react组件,很多人第一印象往往是createClass,这是因为createClass是react组件最原始的写法,基本每个学react的人都是接触这种 ...

  7. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  8. React——高阶组件

    1.在React中higher-order component (HOC)是一种重用组件逻辑的高级技术.HOC不是React API中的一部分.HOC是一个函数,该函数接收一个组件并且返回一个新组件. ...

  9. 当初要是看了这篇,React高阶组件早会了

    当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说 ...

随机推荐

  1. 菜鸡的Java笔记 生产者与消费者

    生产者与消费者        代码要求知道做什么用即可        线程间的通讯问题以及 Object 类的支持            基础模型        现在希望实现一种数据的生产和取出的操作 ...

  2. python 函数的定义及调用语法,map 方法,函数嵌套递归

    1.什么是函数    开发程序时候,需要代码执行多次,为了提高编写效率及代码重用性,所以把具有独立功能的代码块组织为一个小模块,给这个功能一个名称,这就是函数.    函数可以使用系统自带的函数也可以 ...

  3. Python 常见运算符表达式

    常见运算符表达式    1.算数运算符    2.逻辑运算符    3.比较运算符    4.成员运算符    5.位运算符    6.身份运算符a.赋值运算符 =    格式:变量= 表达式     ...

  4. Centos8上安装Nginx

    一.Nginx下载 官网:http://nginx.org/ 选择稳定版下载:直接右键复制下载地址即可 命令: wget http://nginx.org/download/nginx-1.20.2. ...

  5. .NET Core基础篇之:配置文件读取

    配置文件是每个项目最基础的部分,也是不可或缺的部分,比如:数据库连接.中间件属性等常见的配置. 今天这篇文章主要内容就是,在.Net Core项目中怎样去读取配置文件并使用. 提前准备 appsett ...

  6. C# Pechkin初始化一次后被锁住的问题

    Pechkin.dll可用于pdf的生成,常规用法网上都有介绍:https://www.cnblogs.com/felixnet/p/5143934.html 但是当在一个页面上执行过一次之后,再次就 ...

  7. vue简单语法梳理

    小图不够清楚,可以点击大图查看.

  8. Codeforces 576D - Flights for Regular Customers(bitset 优化广义矩阵乘法)

    题面传送门 题意: 有一张 \(n\) 个点 \(m\) 条边的有向图,你初始在 \(1\) 号点,边上有边权 \(c_i\) 表示只有当你经过至少 \(c_i\) 条边的时候你才能经过第 \(i\) ...

  9. vector.erase();vector.clear();map.erase();

    vector::erase()返回下一个iter: STL中的源码: //清除[first, last)中的所有元素 iterator erase(iterator first, iterator l ...

  10. 流量限制器(Flux Limiter)

    内容翻译自Wikipedia Flux limiter 流量限制器(Flux limiters)应用在高精度格式中-这种数值方法用来求解科学与工程问题,特别是由偏微分方程(PDE's)描述的流体动力学 ...