![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React 基础篇
很菜的前端
专业摸鱼
展开
-
React 基础篇(九)—— Fragments
FragmentsReact 中的一个常见模式是一个组件返回多个元素。Fragments 允许将子列表分组,而无需向 DOM 添加额外的节点。class Table extends React.Component { render() { return ( <table> <tr> <Columns /&...原创 2019-11-11 17:12:58 · 306 阅读 · 0 评论 -
React 基础篇(八)—— 错误边界
错误边界过去,组件内的 JS 错误会导致 React 的内部状态被破坏,并且再下一次渲染时产生可能无法追踪的错误。部分 UI 的 JS 错误不应该导致整个应用崩溃,为了解决这个问题,引入了错误边界的概念。错误边界是一种 React 组件,这种组件可以捕获并打印发生在其子组件树任何位置的 JS 错误,并且它具有渲染备用 UI 的能力。错误边界可以在渲染期间、生命周期方法和整个组件树的构造函数中...原创 2019-11-11 16:15:12 · 366 阅读 · 0 评论 -
React 基础篇(七)—— Context
ContextContext 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。一般情况下,数据是通过 props 属性自上而下进行传递的,但这种做法对于某些类型的属性是极其繁琐的,比如主题,这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式,而不必显示地通过组件树逐层传递 props。Context 设计目的是为了共享那...原创 2019-11-11 15:51:16 · 159 阅读 · 0 评论 -
React 基础篇(六)—— 事件处理
事件处理在 React 中,事件的命名采用小驼峰命名法,而且他们都是合成事件,并不是原生的 DOM 事件。React 根据 W3C 规范定义了一套兼容各个浏览器的事件对象。需要注意的是,在 React 中如果需要阻止事件的默认行为,则需要通过事件对象中的 preventDefault() 来实现。除此以外,事件处理方法需要注意 this 指向的问题,这里更加推荐 ES7 的语法来定义这些方法...原创 2019-11-11 14:26:31 · 100 阅读 · 0 评论 -
React 基础篇(五)—— State与生命周期
State程序之所以有灵魂是因为它具有状态,然而,在 React 中,通过 state 的变化来改变视图,从而让 UI 发生变化。组件的 state 是组件内部的状态,而且这个状态是组件私有的。在组件的 constructor 方法中,通过 this.state 定义组件的初始状态。状态改变的唯一途径就是 this.setState() 这个方法。需要注意的是,通过函数定义的组件是没有状态的,...原创 2019-11-11 14:04:06 · 279 阅读 · 0 评论 -
React 基础篇(四)—— 组件与Props
组件组件是 React 的核心概念,是 React 应用程序的基石。组件将应用的 UI 拆分为独立的、可复用的模块,React 应用程序正是由一个一个组件搭建而成的。在 React 中,定义组件的方式有两种,一种是通过函数定义,另一种通过关键字 class 来定义。通过函数定义组件function Welcome(props) { return <h1>Hello, {...原创 2019-11-11 12:28:21 · 139 阅读 · 0 评论 -
React 基础篇(三)—— JSX
JSX在前面 Hello World 的例子中,细心的你会发现,我们在 App.js 中对外暴露了一个函数,然而,在这个函数我们竟然返回了一个 h1 标签,那么,这样的表达到底是 HTML 还是 JS 呢?答案两者都不是,这种语法称为 JSX。JSX 是一种用于描述 UI 的 JavaScript 扩展语法,通常,在 React 应用中使用这种语法来描述一个组件的 UI 。与其他框架一样,R...原创 2019-11-04 11:17:19 · 139 阅读 · 0 评论 -
React 基础篇(二)—— HelloWorld
使用脚手架创建一个 React 项目通过命令:create-react-app react-demo --use-npm 创建一个项目。打开项目后,在终端中输入 npm start 就可以看到一个脚手架默认创建的项目。Hello World在项目的 App.js 中,修改代码:import React from 'react';import './App.css';function...原创 2019-11-04 10:39:53 · 122 阅读 · 0 评论 -
React 基础篇(一)—— 简介
关于 React 基础篇距离第一次使用 React 已经大概有两年了,一直以来都没有做一个关于 React 的总结,所以导致遇到问题就是翻看文档。对于一个强迫症患者来说,这就像 React 根本没有进入到我脑海中一样,所以,从今天开始进行 React 的基础回顾。以前挖下的坑,现在来填。简介对于 React 就不做过多介绍了,官网也只用了一句话来介绍它:React 用于构建用户界面的 Jav...原创 2019-11-04 10:29:58 · 118 阅读 · 0 评论