React 基础
本专栏介绍 React 的一些基础知识,包括从零开始创建 react 项目,了解 React 生命周期,了解 React 新特性 hooks 等等。
杏子姐_1024
1、科大讯飞前端负责人,书籍《Web全栈项目开发入门与实战》作者。
2、职业规划师,可解决:①职业定位问题(帮你找到更适合你的工作);②提升职场竞争力(帮你升职加薪);③职业转型问题(如果你不喜欢当前的工作,辅助你快速转型);④提升职业幸福度(帮你平衡家庭和工作,消除职业倦怠期)。可修改简历和辅导面试。
3、【梦想岛】社群创办人,该社群带领大家一步步实现自己的人生目标,自律打卡,每天进步。人生可以慢,梦想不缺席。
展开
-
React 中实现复制到剪切板功能
下载 copy-to-clipboard。引入 copy 方法,在点击按钮时调用 copy 方法。原创 2020-12-28 12:14:49 · 9000 阅读 · 1 评论 -
了解 React 之 hooks(三)
在前面的文章 [了解 React 之 hooks(二)]中介绍了 hooks 的 3 个性能优化 API,分别为 React.memo、React.useCallback、React.Memo。本文主要介绍 useEffect 的第二个参数。原创 2020-12-21 15:58:20 · 283 阅读 · 0 评论 -
了解 React 之 hooks(二)
在前面的文章 了解 React 之 hooks(一)中介绍了 hooks 的 4 个基础 API(useState、useEffect、useContext、useReducer)。本文主要介绍 hooks 的 3 个性能优化 API,分别为 React.memo、React.useCallback、React.Memo。原创 2020-12-09 10:58:44 · 711 阅读 · 0 评论 -
从零搭建一个 React 项目(非脚手架)
对于前端开发来说,掌握 webpack 必不可少,面试中也是逢面必问。本文主要介绍不使用脚手架从零搭建一个 React 项目,其核心就是如何安装配置 webpack。原创 2020-10-30 23:12:14 · 2149 阅读 · 2 评论 -
了解 React 之 Suspense 和 lazy
Suspense 的中文意思是悬而不定,顾名思义指的是数据加载完成之前页面呈现的内容。在 Suspense 内的任何子组件(数据)只要还在 pending 或者初始状态,则显示的是 fallback 的内容。等所有的数据加载完成才显示子组件,避免多次更新。原创 2020-09-11 10:39:03 · 1796 阅读 · 2 评论 -
了解 React 之 hooks(一)
在 React 中使用 class 继承 React.Component,就可以在类里面使用各种各样的钩子函数,比如 componentWillMount、componentDidMount、componentWillUnmount 等。你也可以直接写 function 来构建 reander 方法,但是就无法使用钩子函数,无法使用 setState 修改状态。在 React 16 版本之后新增了 hooks 特性,hooks 特性的主要表现形式为:在 React 中可以直接使用函数的形式来完成所有组件逻辑原创 2019-11-30 12:23:35 · 6040 阅读 · 9 评论 -
实战 React 之实现 todoList
todoList 是一个任务管理功能,本文将使用 React 框架实现。包含的具体功能点如下:1. 添加任务;2. 修改任务状态;3. 删除任务;4. 筛选任务。原创 2019-10-30 22:17:29 · 939 阅读 · 0 评论 -
实战 React 之组件通信(父组件向子组件,子组件向父组件)
React 组件通信前言一、父组件向子组件通信二、子组件向父组件通信三、兄弟组件通信四、非父子组件、兄弟组件通信前言React 是单页面应用,页面与页面之间,功能与功能之间,都是一个个的组件构成。组件也有层级结构,父与子关系,子与父关系,兄弟关系等。那么有关系的组件之间如何通信?没有关系的组件之间又是如何通信的昵?这些问题将是本文探讨的主题。一、父组件向子组件通信父组件向子组件通信通过 p...原创 2019-10-30 17:28:30 · 740 阅读 · 0 评论 -
实战 React 之从零开始搭建一个 React 项目
一、核心步骤1. 使用 npm install create-react-app 命令安装初始化工具;2. 使用 create-react-app myapp 命令安装React 官方脚手架。二、详细步骤1. 新建一个文件夹 react;2. 按住shift,右键选择“在此处打开 PowerShell 窗口”(也可以通过 win+R 命令一层层进入到该目录下,或者直接用编辑器打...原创 2019-02-25 16:30:05 · 2298 阅读 · 0 评论 -
实战 React 之掌握 react-router-dom 路由配置、跳转与传参
react-router-dom 路由配置、跳转与传参一、react-router-dom 路由配置二、react-router-dom 路由跳转三、react-router-dom 路由传参本文所述的 react-router-dom 版本为 5.0.0;react-router 版本为 5.0.0。一、react-router-dom 路由配置import React from 'rea...原创 2019-06-04 15:02:03 · 5318 阅读 · 0 评论 -
了解 React 之组件的 10 大生命周期
React 组件的生命周期是一种钩子函数,其实也可以理解为是一种回调函数,是 React 组件在创建更新卸载的整个过程中对外暴露出的方法,然后 React 组件会根据方法的返回值来决定内部怎么运作。比如 shouldComponentUpdate 的返回值是 false,那么即便是调用了 this.setState() 方法,也不会重新渲染页面;反之,如果是 true,则会重新渲染页面,也就是重新执行一遍 render() 方法。原创 2019-06-13 23:38:41 · 786 阅读 · 1 评论 -
了解 React 之 constructor 与 super
一、前言以下是常见的 React 组件写法,通常有constructor 函数和 super 函数。那么这两个函数到底有什么作用? class App extends React.Component { constructor(props) { super(props); } render() { ...原创 2019-03-26 17:51:00 · 374 阅读 · 0 评论