React入门与基础知识

简介: 观看阿里云react入门视频的笔记

react是什么

react是一个用来做UI的组件,他专注于做MVC中的V(视图)

为什么要选择react

使用其他的技术如Jquery,需要记很多api,学习起来比较复杂麻烦。
而react具有以下优点:

  • API比较少,类库学习起来简单
  • 组件内聚,易于组合
  • 原生组件和自定义组件融合渲染(互相嵌套一起渲染)
  • 状态/属性驱动全局更新,不用关注细节更新
  • commonjs生态圈/工具链完善

react的基础知识

JSX

类似XML语法,用来描述组件树。
image
将上面的组件,经过类似编译器翻译为下面的语言。
所采用的命名规则为驼峰命名,并且所采用的类名不能与js关键字冲突。

JSX嵌入变量,如下用{变量名}来表示变量的属性值
image

JSX SPREAD
可以通过{...obj}来设置一个对象的键值对到组件的属性值,要注意使用的顺序。
image

EVENT事件

做客户端编程,不可避免需要触发事件。
在react事件,可以通过设置原生dom组件的onEventType属性来监听dom事件,如onClick,onMouseDown(他们的绑定都在一个对象里面,避免了命名空间污染的问题),在加强了组件内聚性的同时,避免了传统html的全局变量污染。
image

组合

组合可以像使用原生dom组件一样使用自定义组件。在react里面只能组合不能继承。
image
如上面,在定义了组件类A后,B使用A并不能继承自A,只能在标签里将A加在i标签内(斜体渲染)进行组合。

组合CHILDREN
可以通过this.props.children来访问自定义组件中的子节点(标签内的空白处内容)。如下图:
image

属性与状态

PROPS属性

可以使用this.props来获取传递给组件的属性值,也可以通过getDefaultProps来指定默认属性值。
image

属性验证prop validation
通过指定propTypes,可以校验属性值的类型。如下图,我们制定了属性值为string类型,当给属性值为2时,仍能运行(进行了类型转换),但是会给出一个warning警告。
image

状态state

状态就相当于局部变量,对于组件的内部的状态,可以使用state
image

Mixin和表单

Mixin

使用mixin可以多个类中实现一些共享的方法,与java中的接口有点类似。mixin是一个普通对象,可以使得不同组件之间共享代码。

表单 Form

与html的区别是:

  • value/checked属性设置后,用户输入无效
  • textarea的值要设置在value属性
  • select的value可以使数组,不建议使用option的selected属性
  • input/textarea的onChange用户每次输入都会触发(即使不失去焦点)
  • radio/checkbox点击后会触发onChange

REF和API

Ref

该功能是为了结合现有的非react类库,通过ref/refs来获取组件实例。
image

Component API

image
image
image

image

相关文章
|
6月前
|
前端开发 JavaScript 开发者
React:JSX语法入门
React:JSX语法入门
85 0
|
3月前
|
XML JavaScript 前端开发
React Jsx语法入门
【8月更文挑战第13天】React Jsx语法入门
43 4
|
17天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
46 10
|
1月前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
2月前
|
移动开发 前端开发 JavaScript
构建高效跨平台移动应用:React Native入门指南
【8月更文挑战第47天】在移动开发领域,React Native凭借其跨平台特性和高效的开发模式赢得了开发者的青睐。本文将通过一个简易的待办事项应用实例,带领读者快速入门React Native,并展示如何利用JavaScript和React框架构建具有原生性能的应用。我们将探讨环境配置、界面布局、状态管理和数据流,以及如何打包和发布您的应用。准备好,让我们开始React Native之旅!
70 20
|
2月前
|
前端开发 JavaScript
React技术栈-React UI之ant-design使用入门
关于React技术栈中使用ant-design库的入门教程,包括了创建React应用、搭建开发环境、配置按需加载、编写和运行代码的步骤,以及遇到错误的解决方法。
38 2
React技术栈-React UI之ant-design使用入门
|
2月前
|
XML 存储 前端开发
React 基础入门
【9月更文挑战第1天】本文详细介绍了由Facebook开发的JavaScript库React,涵盖环境搭建、基本概念、常见问题及解决方案。首先,通过安装Node.js、npm和Create React App快速搭建开发环境;接着,讲解了JSX、组件(包括函数和类组件)、state和props等核心概念;最后,针对JSX语法错误、state异步更新及props与state混淆等问题提供了具体的解决方法和示例代码,帮助读者更好地理解和应用React。
33 2
|
3月前
|
JavaScript 前端开发 容器
React基础入门之虚拟dom【一】
【8月更文挑战第14天】React基础入门之虚拟dom
39 0
React基础入门之虚拟dom【一】
|
3月前
|
前端开发 人机交互
langchain 入门指南 - ReAct 模式
langchain 入门指南 - ReAct 模式
90 1
|
3月前
|
移动开发 前端开发 JavaScript
构建高效跨平台移动应用:React Native入门指南
【8月更文挑战第31天】 在移动开发领域,React Native凭借其跨平台特性和高效的开发模式赢得了开发者的青睐。本文将通过一个简易的待办事项应用实例,带领读者快速入门React Native,并展示如何利用JavaScript和React框架构建具有原生性能的应用。我们将探讨环境配置、界面布局、状态管理和数据流,以及如何打包和发布您的应用。准备好,让我们开始React Native之旅!