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) {
render() {
//构造函数初始化this.props
super(props);
// 设置color的初始值
this.state = {
color: red;
};
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功能实现-组件创建的更多相关文章
- React: React组件创建的三种方式
一.简介 在前面介绍的React组件知识中,对于组件的创建我只是用了其中某一种方式.其实,在2013年React诞生之初,对于React组件的创建,仅仅只有一种方式,也即createClass函数,在 ...
- 理解React中es6方法创建组件的this
首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...
- angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式
基本语法: 动态属性: vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]= ...
- React Native 之 组件化开发
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React数据流和组件间的沟通总结
今天来给大家总结下React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数 ...
- react - 解刨组件的多种写法
一,原始的createClass写法 对于写react组件,很多人第一印象往往是createClass,这是因为createClass是react组件最原始的写法,基本每个学react的人都是接触这种 ...
- 聊聊React高阶组件(Higher-Order Components)
使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...
- React——高阶组件
1.在React中higher-order component (HOC)是一种重用组件逻辑的高级技术.HOC不是React API中的一部分.HOC是一个函数,该函数接收一个组件并且返回一个新组件. ...
- 当初要是看了这篇,React高阶组件早会了
当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说 ...
随机推荐
- 菜鸡的Java笔记 生产者与消费者
生产者与消费者 代码要求知道做什么用即可 线程间的通讯问题以及 Object 类的支持 基础模型 现在希望实现一种数据的生产和取出的操作 ...
- python 函数的定义及调用语法,map 方法,函数嵌套递归
1.什么是函数 开发程序时候,需要代码执行多次,为了提高编写效率及代码重用性,所以把具有独立功能的代码块组织为一个小模块,给这个功能一个名称,这就是函数. 函数可以使用系统自带的函数也可以 ...
- Python 常见运算符表达式
常见运算符表达式 1.算数运算符 2.逻辑运算符 3.比较运算符 4.成员运算符 5.位运算符 6.身份运算符a.赋值运算符 = 格式:变量= 表达式 ...
- Centos8上安装Nginx
一.Nginx下载 官网:http://nginx.org/ 选择稳定版下载:直接右键复制下载地址即可 命令: wget http://nginx.org/download/nginx-1.20.2. ...
- .NET Core基础篇之:配置文件读取
配置文件是每个项目最基础的部分,也是不可或缺的部分,比如:数据库连接.中间件属性等常见的配置. 今天这篇文章主要内容就是,在.Net Core项目中怎样去读取配置文件并使用. 提前准备 appsett ...
- C# Pechkin初始化一次后被锁住的问题
Pechkin.dll可用于pdf的生成,常规用法网上都有介绍:https://www.cnblogs.com/felixnet/p/5143934.html 但是当在一个页面上执行过一次之后,再次就 ...
- vue简单语法梳理
小图不够清楚,可以点击大图查看.
- Codeforces 576D - Flights for Regular Customers(bitset 优化广义矩阵乘法)
题面传送门 题意: 有一张 \(n\) 个点 \(m\) 条边的有向图,你初始在 \(1\) 号点,边上有边权 \(c_i\) 表示只有当你经过至少 \(c_i\) 条边的时候你才能经过第 \(i\) ...
- vector.erase();vector.clear();map.erase();
vector::erase()返回下一个iter: STL中的源码: //清除[first, last)中的所有元素 iterator erase(iterator first, iterator l ...
- 流量限制器(Flux Limiter)
内容翻译自Wikipedia Flux limiter 流量限制器(Flux limiters)应用在高精度格式中-这种数值方法用来求解科学与工程问题,特别是由偏微分方程(PDE's)描述的流体动力学 ...