React组件（推荐，差代码）

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量154 收藏
点赞数
文章标签： javascript python 操作系统 ViewUI
原文链接：https://my.oschina.net/u/3018050/blog/1794807
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

课程地址：https://www.imooc.com/learn/944

认识React

200154_xmKe_3018050.png

200216_oGbz_3018050.png

200405_vgnJ_3018050.png

200416_JyoC_3018050.png

200427_4ZDF_3018050.png

200500_byk1_3018050.png

200559_oK0Z_3018050.png

200625_iv41_3018050.png

JSX—一种语法结构

200719_mi9L_3018050.png

200756_edlM_3018050.png

一、环境安装：

1.HTTP服务器

200900_9pXf_3018050.png

安装python3.5.2

建立项目文件夹react_py

打开teminal（windows上我安装的cmder）

进入该目录下

201301_b9nZ_3018050.png

启动服务器命令

python -m http.server

201344_cIZQ_3018050.png

2.相关准备

安置需要的框架文件

201433_XFpN_3018050.png

react官方链接：https://reactjs.org/

react官方教程：https://reactjs.org/tutorial/tutorial.html

在右上方git中下载最新版本的master（速度挺慢的），看例子

cdn链接：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

复制上面的链接，浏览器打开，分别复制内容到新建的js文件中

204918_T1eo_3018050.png

附加（sublime3）下载：https://www.sublimetext.com/3

205446_9RoF_3018050.png

index.html为新建文件

开启浏览器：http://localhost:8000/component/index.html

205942_xguF_3018050.png

说明可以跑起来了

 

二、组件化

1.组件化思想

引入框架到文件中

210400_J2gj_3018050.png

210528_Y1Gz_3018050.png

ctrl+F5刷新（F12-开发者模式，查看console控制台发现红色文字报错，警告：说明不太正规）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello react</title>
	<script src='react.js'></script>
	<script src='react-dom.js'></script>
	<script src='browser.min.js'></script>
</head>
<body>
	<script type='text/babel'>
		ReactDOM.render(
			<h1>I am Tyler</h1>,
			document.body
		)
	</script>
</body>
</html>

挂载节点父元素-body元素，一般不要挂载在body上

125758_sJHa_3018050.png

125850_MqYf_3018050.png

125732_dk0n_3018050.png

2.react组件化

125910_cHjH_3018050.png

125944_HuqB_3018050.png

130153_dTRo_3018050.png

130204_pbrA_3018050.png

利用函数思想渲染页面，复杂组件由简单组件组成

做一个hello world组件：

130428_shoz_3018050.png

130614_lu6y_3018050.png

jsx对象

130633_E9K2_3018050.png

增加jsx文件，通过react解析，然后dom挂载

130627_HYr8_3018050.png

渲染

130915_aZMr_3018050.png

通过react提供的creatClass组件创建，上面函数中render作用是在渲染的时候会调用下面render函数，得到jsx对象，改变dom模型，进而改变界面

130947_LItm_3018050.png

Helloworld就是一个组件

使用的时候就在ReactDOM.render里面加载

131119_iAQ9_3018050.png

显示出来

组件的优越处：可重用性

131226_RMO4_3018050.png

增加组件的父节点和其他兄弟节点

131246_aK0H_3018050.png

组件输入参数：

131342_iHrP_3018050.png

this指代整个HelloWorld组件对象，props是组件的数据对象，greetTarget是参数名

131459_ov44_3018050.png

输入不同参数

131538_Ouet_3018050.png

3.组件样式设计

065049_mgZg_3018050.png

pros.children

065229_MCsa_3018050.png

065315_fZNm_3018050.png

添加组件，涉及根节点

065348_UrnP_3018050.png

065615_dTq1_3018050.png

065620_7bCY_3018050.png

065707_Pdlm_3018050.png

065719_nU9K_3018050.png

在react下class是关键字，应该使用className

react下设计逻辑和页面逻辑的整合：

把界面设计逻辑封装成一个json对象，把这个对象放在react空间的代码块里面

070447_6Ycy_3018050.png

把界面显示属性封装在letterStyle里，删除style

070720_wz8e_3018050.png

把对象放到render函数里，css语法整合在js里

070811_AIQw_3018050.png

070902_oQE8_3018050.png

设置不同颜色，组件显示的可配置化

070940_h7r0_3018050.png

设计复合式控件（类似调色板）：

071035_expj_3018050.png

071127_z5dr_3018050.png

基本框架代码

071256_U9dA_3018050.png

Square为上方颜色空间，Label为下方文字空间

071426_wDGi_3018050.png

Card为两个空间的结合，把其绘制到根节点下

071522_Hxzb_3018050.png

071800_dW8a_3018050.png

Card空间装饰

071812_DbWI_3018050.png

071859_mlAg_3018050.png

071908_yes1_3018050.png

072001_0qEI_3018050.png

072008_5g68_3018050.png

4.组件实现

072317_UwoP_3018050.png

072351_EeT3_3018050.png

color变量属性

072644_I5oZ_3018050.png

字空间的color先通过父属性传递

072751_kjGO_3018050.png

072757_VfHk_3018050.png

修改可变，空间可重用

5.组件属性的传递

072921_6lVD_3018050.png

073008_s1yf_3018050.png

react不能直接从1到5，属性也不能反向传递（子到父）

073335_ROtj_3018050.png

使用基本框架代码

073442_xFLl_3018050.png

073530_cJ9j_3018050.png

外层组件

073602_gqUx_3018050.png

在外层属性

073640_CyVL_3018050.png

最外层设置属性值

073741_lw3V_3018050.png

属性传递不灵活

074018_WkFz_3018050.png

使用ES6 中{...}语法，属性的扩展操作符

074028_TKO6_3018050.png

6.组件状态机制

074112_V9Ck_3018050.png

灵活？ 组件是程序的基本单位。需要存储机制-组件的状态机制

074440_seXt_3018050.png

074555_hC65_3018050.png

在基本框架里新建对象

074653_DhOa_3018050.png

074633_TQBL_3018050.png

增加显示样式

074741_96lq_3018050.png

074756_bCpE_3018050.png

增加背景颜色

074810_nYwV_3018050.png

基本逻辑完成

了解几个js原生接口：

075202_GI3e_3018050.png

getInitialState——组件加载之前会被调用-初始化组件

075305_tTr4_3018050.png

componentDidMount——组件被浏览器加载之后，但是render函数还没有被调用之前

这里是调用定时器的最佳时期

075441_QXt8_3018050.png

setState——用来修改组件本身的state对象

075601_luG8_3018050.png

075618_ORDE_3018050.png

075700_F9QC_3018050.png

075813_K1H4_3018050.png

timerTrick是个回调函数

075906_Wk8n_3018050.png

080033_oxuv_3018050.png

计数开始变化

080214_oYGx_3018050.png

调用机制：

getInitialState初始化加载   —>   componentDidMount被调用   —>   定时器开启  —>  触发上图render函数  —>  如果render里面引用了他的子组件，子组件的render也会被自动调用，会引发render函数的调用浪潮，整个界面的信息会自动发生改变 —> 使得底层数据和界面保持一致

增加界面修饰内容：

080747_2EDb_3018050.png

080805_a8Wl_3018050.png

数据显示

080844_RqWa_3018050.png

080939_QFRi_3018050.png

080926_F0Zv_3018050.png

增加属性对象

081124_ThLI_3018050.png

 

三、组件的生命周期

081453_wIiL_3018050.png

几个重要的生命周期函数

081604_zD3N_3018050.png

081551_9Fxs_3018050.png

081737_le5n_3018050.png

081849_va5v_3018050.png

对应this.props

081924_pqEO_3018050.png

对应this.state

082013_76iZ_3018050.png

挂在到#container下

082112_Lalc_3018050.png

说明组件被框架加载到页面了

082204_Mj56_3018050.png

页面绘制

082400_t5w8_3018050.png

082425_nMUr_3018050.png

生命周期顺序1-组件生成

getDefaultProps —> getInitialState —>  componentWillMount —> render —> componentDidmount

082852_JWYf_3018050.png

083024_4HLk_3018050.png

增加页面样式

083035_9pZ2_3018050.png

083237_RAlC_3018050.png

创建子组件Counter，增加display显示属性

083320_aavJ_3018050.png

传递值0

083334_kG21_3018050.png

083431_W2Wx_3018050.png

变量初始化为0

083459_XJdl_3018050.png

增加increase函数

083554_mosA_3018050.png

添加函数

083607_REZJ_3018050.png

083729_9cxi_3018050.png

shouldComponentUpdate生命周期函数

083825_ZteF_3018050.png

参数newPros对应的是getDefaultProps函数的rentrun对象

083931_09uT_3018050.png

newStae对应的是更新好的count对象

084304_tTao_3018050.png

如果返回值是true的话会继续调用，如果不是就会停止调用后续的生命周期函数

shouldComponentUpdate是个很重要的周期函数，它的逻辑关系到整个生命周期

084452_PdYh_3018050.png

componentWillUpdate,componentDidUpdate生命周期函数

085356_iJyT_3018050.png

生命周期顺序2-组件调用

getDefaultProps —> getInitialState —>  componentWillMount —> componentDidmount—> render —> shouldComponentUpdate (true)  —>  componentWillUpdate (false) —>  render —> componentDidUpdate 

一个正常的生命周期流程

getDefaultProps —> getInitialState —>  componentWillMount —> componentDidmount—> render —> shouldComponentUpdate (false)

5时停止调用后续

getDefaultProps —> getInitialState —>  componentWillMount —> componentDidmount—> render —> shouldComponentUpdate (true)  —>  componentWillUpdate (true) —>  shouldComponentUpdate (true)  —>  componentWillUpdate ...

1-4时反复调用

探索更新周期

150827_RwbR_3018050.png

componentWillUnmount生命周期：用于结束某些组件

150853_3QsD_3018050.png

在shouldComponentUpdate中添加拿掉节点的react语句

生命周期顺序3-组件消亡：

getDefaultProps —> getInitialState —>  componentWillMount —> componentDidmount —> render —> shouldComponentUpdate (true) —> componentWillUpdate (false) —> render —> componentDidUpdate —>  shouldComponentUpdate (false) —>  componentWillUnmount(定时器组件被拿掉前，做收尾处理)

152238_utMw_3018050.png

comentWillReceiveProps生命周期

152433_ZK7v_3018050.png

shouldComponentUpdate生命周期

152522_1SWW_3018050.png

componentWillUpdate生命周期

接下来调用render

152634_bemq_3018050.png

componentDidUpdate生命周期

152731_MWmW_3018050.png

在组件上设置断点

152850_5xBL_3018050.png

点击+

152947_TPnO_3018050.png

继续断点，之后调用render，把相应的值绘制

153021_1jn0_3018050.png

生命周期顺序总结：

getDefaultProps-getInitialState-componentWillMount-componentDidMount-shouldcomponentUpadate-componentWillReceiveProps-shouldcomponentUpadate-componentWillUpdate-render-componentDidUpate

 

相关学习网站：

1.推荐 10 个 ReactJS 入门资源： https://www.oschina.net/translate/10-resources-to-get-you-started-with-reactjs

 

转载于:https://my.oschina.net/u/3018050/blog/1794807

weixin_34364071
关注
React组件
weixin_44501366的博客
12-09 412
1. React组件介绍 一个页面往往是由多个组件来实现完整的页面功能的，组件具有可复用、独立、可组合的特点，用户可以在一个页面中复用一个组件，并且每个组件又是相对独立的，不会受到其他组件的影响。并且组件可以任意组合，就像一辆标准化的小车，每个配件都单独生产，轮子可以复用，但是每个轮子都是独立的，同时你把这些配件按不同方式组合在一起，就可以得到不同的最终产品。 2. 创建React函数组件 使用JS中的函数创建的组件叫做：函数组件 注意点： 要以大写字母开头来创建组件名称，React 据此区分组件和普通R
react组件
wlt_5079的博客
06-26 595
1.组件结构 2.组件状态 3.组件生命周期 4.组件传值
differ:代码差异的React组件
05-16
React差异 代码差异的React组件。 样本 用法 npm i react-differ --save # Or yarn add react-differ import React , { Component } from 'react' import Differ from 'react-differ' const from = `import React, { Component } from 'react' import Differ from 'react-differ'` const to = `import React from 'react' import Differ from 'react-differ'` class App extends Component { render ( ) { return ( < Differ from =
React组件详解
weixin_34212762的博客
07-19 223
注：本部分出自《React Native移动开发实战》修订版 3.6.1 React组件简介 众所周知，组件作为React的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是React应用程序的基石。在React的组件构成中，按照状态来分可以分为有状态组件和无状态组件。 所谓无状态组件，就是没有状态控制的组件，只做纯静态展示的作用，无状态组件是最基本的组件形...
react 代码块插件
qq_39296854的博客
12-03 443
一、代码块插件 1.vscode扩展搜索 ES7 React/Redux/GraphQL/React-Native snippetsd或者React-Native/React/Redux snippets for es6/es7 并安装（如果安装后者 直接cccs可以一键生成模板块 安装前者 步骤如下）
react-code-blocks:React代码块和代码片段组件
05-01
欢迎使用react-code-blocks :waving_hand: :waving_hand: :waving_hand: React组件用于通过语法高亮显示代码段 VERSION >= 0.0.8-alpha变化： VERSION >= 0.0.8-alpha现在需要一个nodejs版本> = 12 道具 复制块道具 支持的主题 支持的语言 备择方案 托多斯 表示支持 作者 背景 最初，这是一个小项目，旨在修改Atlaskit的代码块组件以支持更多语言（ graphql ， reasonml等）。 然后，它Swift演变成一个永无止境的兔子洞，最终以对主题（例如railscast，darcula，monokai等），可定制的样式以及复制功能的支持为最终目标！ 除非人们希望实际使用它，否则我不打算保持此更新。 所以不要害羞！ 随意张贴的问题或PR 。 :sparkles: 演示版 安装 通过yarn或npm安装react-code-blocks y
react组件化
前端菜鸟
03-12 947
1：什么是react？ （1）react是一个用于构建用户界面的JS库 （2）核心专注于视图，目的实现组件化开发 2：组件化概念： 我们可以很直观的将一个复杂的页面分割成若干个独立的组件，每个组件包含自己的逻辑和样式，再将这些独立组件组合成完成一个复杂的页面，这样既减少了逻辑复杂度，有实现了代码的重用； （1）可组合：一个组件可以和其它的组件一起使用，或者可以直接嵌套再另外一个组件内部 ...
cn-react-coda:simple一个简单的react组件来编写代码片段
04-18
一个简单的react组件来编写代码片段 安装 npm install cn-react-coda 发展 测试 npm run test 建造 npm run build 皮棉 npm run lint 如何使用？ import React from "react" import { Coda } from "cn-react-coda"...
在React 组件中使用Echarts的示例代码
08-28
在 React 组件中使用 Echarts 的示例代码是非常重要的，特别是在需要可视化数据的时候。Echarts 是一个功能强大且灵活的数据可视化库，它提供了多种类型的图表，包括柱状图、折线图、饼状图等。下面将详细介绍在 ...
react-React组件脚手架可以调试打包发布单个React组件
08-15
React组件是可重用的代码块，它们像独立的自包含小程序，接收输入（称为props）并返回React元素描述应如何显示。组件可以通过组合其他组件来创建复杂的UI。 此脚手架可能包含以下核心部分： 1. **配置文件**：如`...
React 组件转 Vue 组件的命令写法
11-26
基于目前React和Vue比较火，开发react-to-vue 工具的目的是为了进一步提高组件的可复用用性，让组件复用不仅仅局限在一个框架里面 简介 对于react-to-vue工具，转化的是基本的react component，而不是全部的react...
angular-react：在Angular中使用React组件
01-31
轻量级的Angular组件包装器通过常见的Angular组件（在许多情况下包括命令式和声明性语法）公开了Fabric React组件API。 快速链接 | | | | 典型用例 在Angular中使用React组件库 逐步将Angular应用程序重
在React中实现一个组件
weixin_34393428的博客
03-03 247
本文简单介绍了如何编写一个React 组件。为了快速演示，文章中出现的示例代码均用 react-create-app 官方推荐的脚手架快速搭建的项目中完成，react-create-app传送门。一、组件的介绍Components let you split the UI into independent, reusable pieces, and think about each piece ...
13个React代码片段汇总
web前端开发
09-05 564
英文 | https://medium.com/frontend-canteen/a-summary-of-react-by-10-code-snippets-15aca7c5a8c801、Create React App$ create-react-app YOUR_APP_NAMECreate React App 是一个用于创建 React 项目的 CLI。02、JSXconst eleme...
感觉react的代码很乱_感觉！
cundai5745的博客
07-12 656
感觉react的代码很乱We got fish for the office .. then they had baby fish .. now we have a whole lot of fish but they are very cool and the babies are tiny. See the feesch. 我们为办公室买了鱼。然后他们有了幼鱼..现在我们有很多鱼，但...
react 省市区地址级联 china-division、antd、Cascader
qq_42339350的博客
03-22 2426
官方推荐的codesandbox在线例子 代码地址 效果 使用 yarn add china-division 复制粘贴代码 其他 同理可以使用案例中遍历获得的数据进行其他操作。
探索React Diff Viewer：一款强大的代码差异比较组件
gitblog_00054的博客
03-26 922
探索React Diff Viewer：一款强大的代码差异比较组件 react-diff-viewerA simple and beautiful text diff viewer component made with Diff and React.项目地址:https://gitcode.com/gh_mirrors/re/react-diff-viewer 在软件开发中，查看和理解代码的差...
react基础知识
weixin_51666715的博客
03-25 1487
react基础知识 搭建项目 npm install -g create-react-app 使用 npx create-react-app 项目名称 运行项目的话 npm run start react代码块组件: Simple React Snippets jsx语法 我们的react页面的元素放在我们的return中 语法见下： import React from 'react'; import "./Demo3.css" function Demo3() { let obj={
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 646
【代码】【JavaScript】LeetCode：707设计链表。
React组件开发实践与经验分享
"React组件项目的实践分析，涵盖了从基础到进阶的编写技巧，包括使用ES6、ES7语法，理解展示组件与容器组件的区别，以及基于类的组件的实现方式。文章还提及了状态初始化、propTypes和defaultProps的使用，并提到了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值