React
关注
分享
扫一扫
文章平均质量分 51
张培跃吧
拥有十余年实际开发经验的骨灰级程序员！
资深IT培训讲师！
目前专注于web前端领域知识分享。
卫信工粽号:张培跃。
展开
-
有没有愿意和我一起干爆React的？
就业工作确实很累心，忙碌时白天上课，晚上复盘面试，后期要听找工作困难的学生的面试录音，分析面试问题。确实，受当前大环境的影响，许多大厂在裁员，小部分被裁的人因能力限制难以找到满意的工作，便在网上进行各种花式吐槽。当前的网络环境针对于前端而言并不友好，导致许多从事前端的人非常焦虑，而有意向从事前端的人则对其望而却步。如果有愿意和我一起干爆React的，可以帮我点一个赞，或者在看，给我一些做这件事情的动力。至于网上的就业不足15%的宣传，至少在我带过的班级中从未出现过，也可能是我孤陋寡闻了。原创 2024-03-10 15:42:55 · 580 阅读 · 0 评论 -
不惧裁员：React进阶知识点汇总
React 服务端渲染流程及实现原理，可熟练使用 next.js。原创 2024-02-03 22:42:42 · 643 阅读 · 0 评论 -
字面跳动前端面试题：React Hook为什么不能放在if/循环/嵌套函数里面？
其实，在项目的研发过程中，我们除了要保证代码的整洁以及可维护外，还要确保应用可以顺畅的运行，以前我们在一个项目中就遇到过类似的问题，当时就是因为一个。因此，在编写 React 函数组件时，一定要遵循 Hook 规则，只在顶层使用 Hooks，并且不要在循环、条件或嵌套函数中调用。，可能会导致它们的调用顺序和次数不一致，从而引发一些奇怪的问题，比如状态不稳定、内存泄漏等。其次，从生命周期的角度来看，Hook 的生命周期与组件的生命周期是紧密相关的。的状态更新是异步的，只有当依赖项发生变化时，状态才会被更新。原创 2024-02-03 22:38:35 · 1936 阅读 · 0 评论 -
2024年前端找工作的核心重点：向上卷！梭哈React！
我觉得只要能摸准市场的技术走向，三周就业百分之八十以上，就业平均工资12k以上，做到这样的数据我还是非常有把握的！我带过的毕业班，班班如此！有的人看到这估计儿估计就要反驳我了，我想说：要么是你太菜，要么是带你的人太菜！那些为了卖课为了割韭菜的那帮人，真的是脸都不要了！动不动就说前端没有了，大家千万不要学前端！前端无用论是满天飞！我是一个写了十多年代码的全栈开发人员，从前端到后端从商务到运维也都有所涉猎！最近几年我也一直在搞前端的就业，最近，真实的面试录音我也听了不止上百段！我发现越菜的叫的越凶！原创 2024-01-31 20:19:06 · 619 阅读 · 0 评论 -
通过 React 来构建界面
/ 通过createRoot函数，将 id 为 root 的 div 作为呈现 React 内容的容器。注意：以上两个文件可以通过浏览器打开，另存为并保存至目录lib中即可，lit目录文件如下。// ReactDOM 来自react-dom.development.js。同一个挂载位置，可以执行多次 render ，后者会覆盖掉前者的内容。同一个挂载位置，不允许多次被指定为 React 容器。// 在容器中呈现 Hello, world!允许在同一个界面中指定多个挂载容器。：React中的核心库文件。原创 2024-01-31 11:09:04 · 1429 阅读 · 0 评论 -
React中文官网已经搬迁了，原网址内容将不再更新
注意2：React官网已经将React的定义由“用于构建用户界面的 JavaScript 库”更改为“用于构建 Web 和原生交互界面的库”。注意1：React中文官网已经搬迁至-，原网址内容将不再更新。原创 2024-01-27 08:00:00 · 849 阅读 · 0 评论 -
React介绍
- 什么是React官方：用于构建用户界面的 JavaScript 库 。所以React并不是一个框架，而是一个用于前端数据渲染的库。而人们常指的React框架指的是：react+react-router+react-redux的组合。React框架是渐进式的。React 起源于 Facebook 的内部项目，最初来架设 Instagram ，后于 2013 年 5 月开源。- React的特点高性能：虚拟DOM(Virtual DOM)配合 diff 算法，最大限度地减少与 DOM 的原创 2022-05-11 20:33:59 · 686 阅读 · 0 评论 -
[已解决]react异常：Can't perform a React state update on an unmounted component
报错如下:Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous t...原创 2020-04-21 22:47:10 · 20492 阅读 · 5 评论 -
通过webstorm快速创建react组件模板
一、点击File,然后点击Settings二、添加模板三、模板内容import React, {Component} from 'react';export default class ${NAME} extends Component { constructor(props) { super(props); this.state = {};...原创 2020-04-16 22:46:58 · 3052 阅读 · 5 评论 -
React归纳笔记：快速上手Redux之一初识
如何打造可复用的视图组件一直是React所关注的。但如果你要开发一个大型的web应用的话，只使用React是一件非常痛苦的事情。因为单是解决组件之间的数据传递与状态管理就够你喝一壶的了！在此向各位力荐一类库——Redux，它可以帮助我们更加高效、清晰地对应用和组件的状态进行管理！Redux介绍随着单页面应用的需求越来越复杂，你所需要管理的状态也越来越多。这里所说的状态即是数据，它不仅仅包括...原创 2019-05-17 18:44:50 · 1846 阅读 · 0 评论 -
create-react-app 创建应用修改为淘宝源（cnpm)解决超慢问题
通过create-react-app来创建应用：create-react-app my-app创建应用的命令很简单，但在拉取资源的时候往往会巨慢！甚至会报错！原因是create-react-app默认使用的是npm，只需要将其修改为淘宝源即可：先来看下npm拉取资源的源地址：->npm config get registry->https://registry.npmjs....原创 2018-09-26 20:21:38 · 4327 阅读 · 2 评论 -
Create React App 快速脚手架
开发React应用时，很少有人直接引入react的源JS文件，然后再开发。大家都是用webpack + es6来结合react开发前端应用。而webpack的使用又比较繁琐，为此官方提供了用于快速构建开发环境的脚手架工具Create React App。该脚手架将Webpack、Babel工具的配置进行了封装。使用它创建的项目，开发者不需要对其进行任何的配置工作，从而使你可以专注于开发！1、...原创 2018-09-25 20:44:03 · 413 阅读 · 0 评论 -
React之你的第一个React程序
React这么一个设计思想极为独特的框架究竟来自于何处？它来自于Facebook一个内部项目！而Facebook一个如此伟大的公司为何花费精力来写这样一套框架呢？因为该公司对市场上所有JavaScript框架都不满意！牛逼的人自有自逼之处，于是乎该公司就决定自已写一套名字叫React的框架。并于2013年5月开源了！在学习React之前，你需要具备一些最基本的知识：1、HTML...原创 2018-08-19 16:56:50 · 797 阅读 · 0 评论 -
React之JSX语法
JSX 即Javascript XML，它是对JavaScript 语法扩展。React 使用 JSX 来替代常规的 JavaScript。你也可以认为JSX其实就是JavaScriptJSX的优点：快，执行速度更快，因为它在编译为JavaScript代码后进行了优化。可以使用熟悉的语法仿照HTML来定义虚拟DOM。从而编写模板更加简单快速。使用JSX如果要使...原创 2018-08-19 18:42:00 · 805 阅读 · 0 评论 -
React之组件
项目开发组件化已经是目前前端主流技术的一个发展方向了。当你在学习一个新的框架时，组件必是其最基础，也是其最重要的一部分。本篇文章主要介绍React当中的组件如何编写 ！从而达到让我们开发的项目更容易来管理的目的！React组件你可以把它看作是一个带有props属性集合和state状态集合并且构造出一个虚拟DOM结构的对象。创建组件首先我们通过函数来创建一个组件，函数的名...原创 2018-08-23 17:25:49 · 251 阅读 · 0 评论 -
React之Props，及与state的区别
在之前关于组件的文章当中已经对Props有所涉及！而本篇文章主要是对Props进行更加全面介绍！以及总结props与state的区别！组件内可以通过props来获得属性值，看下面的实例先来回顾 一下Props最基本的使用：<!DOCTYPE html><html lang="en"><head> <meta charset=...原创 2018-08-28 21:52:05 · 2007 阅读 · 0 评论 -
React如何处理事件
今天我们主要说一下React是如何处理事件的。事件的处理是前端开发过程中非常重要的一部分，通过事件处理，我们可以响应用户的各种操作，从而实现一个富交互的应用。React事件处理VS原生Dom事件处理两者在事件处理方面极其类似，只是在一些语法上稍有不同： * React 事件绑定属性的命名采用驼峰式写法（如：onClick,onKeyUp），而不全是小写字母。 * 如果采用 ...原创 2018-08-30 08:42:25 · 851 阅读 · 0 评论 -
React的小案例：&&运算符、元素变量、三目运算符与React的条件渲染都在这里了
今天的知识点不难，主要考验大家伙对代码的阅读能力啦！即将要接触的知识点有&&运算符、元素变量、三目运算符与React的条件渲染……如下图，要完成一个简单的切换功能： 废话不多说，直接开始读代码吧！<!DOCTYPE html><html lang="en"><head> <meta charset="U...原创 2018-09-02 11:49:23 · 2354 阅读 · 0 评论 -
React如何对列表数据渲染以及key
列表数据在项目中很常见，身为前端工程师的你几乎天天都要与列表数据打交道，像新闻列表、用户列表、流水列表等等。本篇文章主要讨论在React.js中如何渲染列表数据。1、将元素放到数组中直接渲染之前曾经说过，一个数组直接放到JSX当中，那么会被直接展开。那么数组里直接存放元素内容呢？示例：class Book extends React.Component{ ren...原创 2018-09-06 08:34:35 · 5652 阅读 · 0 评论 -
React之状态（State)
在React当中，当你更新组件的state，然后新的state就会重新渲染到页面中。在这个时候不需要你操作任何DOM。你也可以认为组件在React当中是一个状态机（State Machines）。当用户进行操作时会实现不同的状态，然后再渲染到你的页面中，让你的页面与数据始终保持一致。如果对状态不好理解的朋友，你可以认为状态即是数据！现在我们先来通过ES6类React.Compo...原创 2018-08-26 09:28:43 · 1603 阅读 · 0 评论