React 基础知识

React使用了响应式渲染,将状态从展现给用户的UI中分离出来。它超越了数据绑定,克服了其缺陷并且在使用上更加容易。它用一种声明的方式来定义组件的外观和行为,当数据发生变化时,React会在概念上重新渲染整个用户界面。(这里就引入了虚拟DOM的概念)

在一个React应用中,一切都由组件组成。组件就是应用 程序中的自包含的,关注特定用途的基础构件。比使用模板有巨大的好处。

一个React组件就是一个带有render的方法,并且返回组件UI描述的JavaScript类

正规的开发流程:

  • 编写JSX并随时将它转换成标准的JavaScript代码

  • 使用模块化模式编写代码

  • 管理依赖性

  • 打包多个JavaScript文件并使用source maps进行调用

项目的基础结构

  • 一个source文件夹,包含了所有的JavaScript模块

  • 一个index.html,几乎是一个空页面,只是用来加载应用程序的JavaScript,并提供一个div来让React在该元素中渲染出应用程序的组件

  • 一个package.json文件,它是一个独立的npm清单文件

  • 一个模块打包或build工具,用来实现JSX转换和模块/依赖项打包。比如webpack

the sample code to let user create a project quickly
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

部署的时候使用

npm run build

上面的命令可以完成所有初始化工作,但是具体的步骤可以分为

  1. 在终端上运行npm init 生成package.json

  2. index.html中使用boudle.js 它是react编译的标准输出

  3. 配置webpack.config.js

  4. 在package.json中创建启动本地服务的命令

第一个React组件

  • import React

  • extends React.Component

  • 实现render() 方法,在方法里return JSX语句

技巧:可以使用解构赋值来直接访问模块内部的函数和类,类似于python的from *** import ***

import React, { Component } from 'react';

在React中使用js,可以在React的component中直接写js的代码,

  • 不过要在render的函数中写,而不能写到return语句中。

  • 可以使用 {},在{}中的值被被当作一个JS表达式进行求值,并被渲染到HTML标记中

将组建组合起来:React的好处就是可以创建简单的可重用的组件,然后通过将组进行嵌套和组合来创建复杂的UI

props是React中的一种从父组件向子组件传输数据的饿机制,

  • 它们在子组件中不能被修改

  • props由父组件传输,也由父组件拥有

  • 接收props的组件(子组件)是无法改变props的值的。

子组件通过props可以获取到从父组件通过<*** a="b">这样语法传给子组件的值

组件的常用函数:

  • render()

  • constructor()

定义组件的层级关系

  1. 每个组件都应当小巧且只关注单个功能

  2. 分析项目的外观框架和布局

  3. 每个组件创建为一个单独的JavaScript文件,但是有点要注意就是每个文件要加上export default GroceryList;

State 一种可以体现状态的可变数据

  • 调用方式是this.state

  • 对于组件是私有的,通过 this.setState()来进行修改。

  • 当state被修改时,组件会触发响应式渲染,此时组件和其子组件都会被重新渲染。

可以在任何时刻为组件添加state,比如在constructor中

组件可以使用constructor()来进行初始化

react中的事件

回调函数的作用域是组件,需要显示的将函数绑定到上下文中

this.onClickButton = this.onClickButton.bind(this)

对内联样式友好,可以使用组件的方式来定义样式

const counterStyle = {
    margin: "16px"
}
return(
<div style={counterStyle}>

一个包含值和一选定属性的表单组件称为受控组件在一个受控组件中元素内部所有渲染的值将一直反应属性的纸。

非受控组件不设置value属性,任何用户输入都会立刻反应到渲染后的元素上。

key特性,他是一个唯一标识符允许你在需要进行插入,删除,替换和移动操作时。快速找到元素。创建组建时需要为每一个子元素提供一个key.可以是 任何静态且唯一的值

当需要操作真实DOM时,可以使用refs

类构造函数属性,如果初始化时没有被满足,就会打印出警告信息

propTypes校验器,可以用来校验初始化时传入的值。

有状态的组件和单纯组件

让一个应用程序的大部分组件都是无状态的单纯组价是一个最佳实践

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容

  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,360评论 1 33
  • React 基础知识介绍 本章节会介绍一些 React 的基础知识和基本用法。已经入门 React 基础的同学,可...
    Eternal丶星空阅读 459评论 0 2
  • 1、什么是react React.js 是一个帮助你构建页面 UI 的库。React.js 将帮助我们将界面分成了...
    谷子多阅读 2,520评论 1 13
  • 自从结婚以来,一年接一个年的生孩子,一男孩一女孩,也买了漂亮房子。常常没了自我,围着一家子转啊转,去挣钱是我最大的...
    忧伤小春天阅读 200评论 0 1
  • 又到了介绍死党的时候了。嗯!我读了死党所有的文章,大概对我的死党有一个初步印象。我的死党简书名:袅绕2011。小伙...
    狸猫啊阅读 189评论 1 1