React16基础
文章平均质量分 73
“世界上最宽广的是海洋,比海洋更宽广的是天空,比天空更宽广的是人的胸怀”
知其黑、受其白
每个优秀的人,都有一段沉默的时光,那段时光,是付出了很多努力,却得不到结果的日子,我们把它叫做扎根。
你可以从别人那里汲取某些思想,但必须用你自己的方式加以思考!
展开
-
P26:React高级-多DOM动画制作和编写react-transition-group
React16 基础阐述使用 TransitionGroup加入 `` 标签demoindex.jsBeauty.jsBeautyItem.jsBoss.jsexp.css接口 php阐述通过上一节的学习,只能控制一个DOM元素的动画,想控制多个动画 react-transition-group这个动画库也是可以做到的。这节课就带你了解一下多DOM动画控制的方法。使用 TransitionGroup它就是负责多个DOM元素的动画的,我们还是拿服务这个案例作例子,现在可以添加任何的服务项目,但是都是原创 2021-12-13 16:42:42 · 347 阅读 · 1 评论 -
P25:React高级-react-transition-group动画库显示隐藏
React16 基础阐述1 安装 react-transition-group2 使用CSSTransition3 unmountOnExit 属性阐述React有着极好的开发生态,开发需要的任何基本需求都可以找到官方或大神造的轮子,动画这种必不可少的东西当然也不例外,React生态中有很多第三方的动画组件,你应该学习一下 react-transition-group 动画组件。目前我在工作中使用表现很好,可以满足日常动画开发需求。推荐的最重要理由是:这个也是react官方提供的动画过渡库,有着完原创 2021-12-13 16:18:23 · 690 阅读 · 0 评论 -
P24:React高级-CSS3的关键帧keyframes动画
React16 基础阐述keyframes动画介绍使用动画完整CSS代码的实现总结阐述用 transition 只能作一些最简单的动画,如果你想稍微复杂点,transition就做不出来了。这时候就可以用CSS3中的关键帧动画 keyframes。本文就花几分钟学习一下keyframes,如果你CSS3动画部分的知识很好,完全可以跳过这节课。keyframes动画介绍此属性与 animation 属性是密切相关的,keyframes 译成中文就是关键帧,我最早接触这个关键帧的概念是字 flash中原创 2021-12-13 15:52:36 · 1765 阅读 · 1 评论 -
P23:React高级-CSS3实现react显示隐藏
React16 基础阐述新建一个Boss组件编写业务逻辑加入CSS动画Demoindex.jsexp.cssExample.jsBoss.js阐述前端的动画技术发展到现在,完全可以独立出一个岗位。我目前不属于动画岗,能力有限,也只是简单的给小伙伴们讲讲,做一些前端常用的效果。本文先用我们最熟悉的CSS3在React中制作一个显示隐藏的动画特效,注意这是用CSS3实现的,其实React只做了业务逻辑。新建一个Boss组件需要给 “服务菜单” 增加一个Boss服务人物,点击一下按钮就会自动出现 ”Bo原创 2021-12-13 15:17:20 · 772 阅读 · 1 评论 -
P22:React高级-axios数据请求
React16 基础阐述安装 Axiosnpm install -save 和 -save-dev分不清axios 请求数据示例Beauty.jstt.cc 的 index.php修改程序变为动态接口阐述有了生命周期的知识,这节课学习远程数据请求的知识,小伙伴们肯定都知道,ajax可以远程请求,但是这写起来太麻烦了,我们用程序的ajax请求框架 Axios 来实现。安装 AxiosAxios 的安装可以使用 npm 来进行安装,你可以直接在项目根目录下,输入下面的代码。npm install -s原创 2021-12-13 11:32:47 · 800 阅读 · 1 评论 -
P21:React高级-生命周期改善程序性能shouldComponentUpdate
React16 基础阐述服务组件存在性能问题利用 `shouldComponentUpdate` 解决阐述已经对React生命周期有了认识,那如何利用它提高组件的性能那?这节课我们会讲一个通过shouldComponentUpdate函数,改善React组件性能的例子。服务组件存在性能问题是的,服务组件已经写的很熟悉了,但是它有一个性能问题,我一直没告诉你,那就是子组件 BeautyItem 频繁无用渲染 render。如何能看出这个问题的呢?首先你要确认你安装了 React Develope原创 2021-12-13 10:53:45 · 736 阅读 · 0 评论 -
P20:React高级-生命周期讲解 componentWillUnmount(三)
React16 基础阐述componentWillUnmount 函数demo新建 `index.js`新建 `Beauty.js`新建 `BeautyItem.js`预览阐述其实本篇算是一个小的补充,把最后一个React的生命周期函数讲一下,这个生命周期函数就是 componentWillUnmount,它是在组件去除时执行。componentWillUnmount 函数这个函数时组件从页面中删除的时候执行,比如在 BeautyItem.js,写入下面的代码://当组件从页面中删除的时候执行原创 2021-12-13 10:28:19 · 2817 阅读 · 0 评论 -
P19:React高级-生命周期讲解(二)
React16 基础阐述shouldComponentUpdate 函数componentWillUpdate 函数componentDidUpdatecomponentWillReceiveProps 函数阐述这节继续学习React生命周期中的 Updation 阶段,也就是组件发生改变的更新阶段,这是React生命周期中比较复杂的一部分,它有两个基本部分组成,一个是 props 属性改变,一个是 state 状态改变(这个在生命周期的图片中可以清楚的看到)。shouldComponentUpdat原创 2021-12-10 19:17:27 · 380 阅读 · 0 评论 -
P18:React高级-生命周期 Mounting 阶段讲解(一)
React16 基础阐述React生命周期图什么是生命周期函数Mounting 阶段总结阐述React的生命周期是非常重要的知识点,所以关于React声明周期的教程可以多看几遍,我也会尽量的把React的生命周期讲的细致。生命周期的课程我分成三篇来讲,这样更容易让你理解。React生命周期图这张图看起来有点复杂,但是小伙伴们不要有恐慌心里,我会抽丝剥茧,给你详细讲解。通过这张图你可以看到React声明周期的四个大阶段:1、Initialization:初始化阶段。2、Mounting: 挂原创 2021-12-10 18:55:43 · 333 阅读 · 0 评论 -
P17:React高级-ref 的用法和 ref 中的坑
React16 基础阐述代替原来的 e.target.valueref 使用中的坑总结阐述在编写组件中的方法时,经常会遇到语义化很模糊的代码,这对于团队开发是一个很大的问题。因为 review 代码或者合作时都会影响开发效率。或者核心成员离开,项目倒闭的严重影响。所以我们必须重视react代码当中的语义化。ref 是个不错的工具,快来学习一下吧。代替原来的 e.target.value以前的案例中,我们写了下面的代码,使用了 e.target,这并不直观,也不好看。这种情况我们可以使用 ref 来原创 2021-12-10 18:36:18 · 558 阅读 · 0 评论 -
P16:React高级-PropTypes校验传递值,使用默认值 defaultProps
React16 基础阐述PropTypes 的简单应用BeautyItem.jsBeauty.jsindex.js浏览器中查看效果必传值的校验使用默认值 defaultProps阐述在父组件向子组件传递数据时,使用了属性的方式,也就是 props,但 “服务菜单” 的案例并没有任何的限制。这在工作中时完全不允许的,因为大型项目,如果你不校验,后期会变的异常混乱,业务逻辑也没办法保证。PropTypes 的简单应用我们在 Beauty.js 组件里传递了4个值,有字符串,有数字,有方法,这些都是可以原创 2021-12-10 18:09:43 · 506 阅读 · 0 评论 -
P15:React高级-调试工具的安装及使用
React16 基础阐述下载React developer toolsReact developer tools 的三种状态React developer tools 使用总结阐述如果你能看到这儿表明已经可以简单的写一些React代码了,在开发中,我也是经常使用console.log这种很二的形式来调试程序。其实React在浏览器端是有一个调试工具的,这就是 React developer tools,这个是React人必下的一个调试工具。本文就主要学习一下 React developer tool原创 2021-12-10 17:12:46 · 1170 阅读 · 0 评论 -
P14:React进阶-单项数据流和其他框架配合使用
React16 基础单项数据流涉及的所有文件style.cssindex.jsBeauty.jsXiaojiejieItem.js和其他框架配合使用函数式编程单项数据流React的特性中有一个概念叫做 “单项数据流”,可能刚刚接触React的小伙伴不太明白这个概念,还是拿出《服务菜单》的 Demo,来给大家讲解。比如我们在父组件中可以直接把this.state.list传递过来。例如下面代码:<ul> { this.state.list.map((item,ind原创 2021-12-09 19:27:21 · 290 阅读 · 1 评论 -
P13: * Component组件拆分、子组件向父组件传递数据
React16 基础阐述新建服务菜单组件父组件向子组件传值子组件向父组件传递数据warning警告获取数组索引下标子组件调用父组件方法预览最终效果index.jsXiaojiejie.js(未用)BeautyItem.jsBeauty.js阐述现在的服务菜单已经完美的制作好了,但是这从头到尾我们只用了一个组件,但是在实际工作中肯定是团队开发,我们会把一个大功能分成不同的组件。比如把文本框和按钮单独一个组件,把下面的服务列表单独一个组件,这涉及了一个组件拆分的能力和知识。本文就把服务菜单进行一个拆分。原创 2021-12-09 18:47:13 · 708 阅读 · 0 评论 -
P12:Simple React Snippets插件安装,快速生成react代码
React16 基础阐述安装 Simple React Snippets快速生成class阐述本文内容很短,但是我觉的有必要单独拿出一节来讲讲。在工作中你经常会看到程序老司机写代码是非常快的,甚至让你烟花缭乱,那他们真的是单身那么多年,练就了超级快手吗?当然不是,只是他们使用了快速生成插件,这节课我就向大家介绍一个 vscode 中的 Simple React Snippets,有了这个插件,稍加练习,你也可以像老司机一样,拥有加藤鹰的圣手(如果不懂请自行搜索吧)。安装 Simple React原创 2021-12-09 16:50:43 · 922 阅读 · 0 评论 -
P11:JSX代码注释、HTML添加class、JSX中解析html、JSX中label激活文本框
React16 基础阐述JSX代码注释JSX中的class陷阱JSX中的html解析问题JSX中 `` 标签的坑阐述通过之前的教程作完“大宝剑”菜单后,如果你跟着我做出来了,说明你的React已经入门了。也是一个好的开始,接下来的路虽然还很长,但会平坦的多。本文就讲一下JSX语法中需要注意的几个小坑。JSX代码注释JSX中的代码注释是非常有讲究的,这个书上介绍的也非常少,所以在这里讲一下,因为我在初学React在这里踩过坑。我第一次写JSX注释,是直接这样写的,当然这样写是完全不对的。<原创 2021-12-09 16:32:06 · 1753 阅读 · 0 评论 -
P10:数组传递下标,删除数组数据
React16 基础阐述数组下标的传递编写 deleteItem 方法阐述添加服务虽然很美好,但是有时候也需要有些节制。本文就学习如何删除一个服务选项。需求是这样的,当点击已经有的选项后,我们就进行删除。如果使用原生的js来写,这是非常麻烦的,但是有了React后就变的简单了。数组下标的传递如果要删除一个东西,就要得到数组里的一个编号,这里指下标。传递下标就要有事件产生,先来绑定一个双击事件,代码如下:<ul> { this.state.list.map原创 2021-12-09 15:54:27 · 1404 阅读 · 0 评论 -
P09:列表数据化、列表添加数据
React16 基础阐述让列表数据化增加服务选项解决key值错误预览阐述有了上节课的基础,这节课终于可以添加服务,为所欲为了,随意增加你想要的服务了。这节课我们就来增加一个躺式采耳服务,体验一把帝王级待遇。让列表数据化现在的列表还是写死的两个<li>标签,那要变成动态显示的,就需要把这个列表先进行数据化,然后再用 javascript 代码,循环在页面上。我们先给上节课的 list 数组增加两个数组元素代码如下:constructor(props){ super(props原创 2021-12-09 12:10:44 · 362 阅读 · 0 评论 -
P08: * 响应式设计和数据的绑定及绑定事件
React16 基础阐述响应式设计和数据的绑定绑定事件阐述本文我们主要了解一下React中的响应式设计原理和数据的绑定方法,俗话说的好:”理论是磨好宝剑的唯一标准”。接下来我们不仅要编写效果,还要讲理论,本节很重要,因为这涉及React中的设计思想和你以后的编程思路。响应式设计和数据的绑定React不建议你直接操作DOM元素,而是要通过数据进行驱动,改变界面中的效果。React会根据数据的变化,自动的帮助你完成界面的改变。所以在写React代码时,你无需关注DOM相关的操作,只需要关注数据的操原创 2021-12-09 11:45:59 · 465 阅读 · 1 评论 -
P07:组件外层包裹原则、Fragment 标签的应用
React16 基础阐述新建服务组件组件外层包裹原则Fragment 标签讲解阐述通过上面六节的学习,已经对React有了基本的认识。最好的学习就是在实战中的成长了,我们开始以作一个《服务菜单》的应用,练习以前所学的知识和学习新知识。当然本教程不是教大家作CSS的,所以我就不进行样式布局了。新建服务组件现在 src 的目录下面,新建一个文件 Beauty.js 文件,然后写一个基本的HTML结构。代码如下:import React,{Component} from 'react'clas原创 2021-12-09 11:11:57 · 433 阅读 · 0 评论 -
P06:React中JSX语法简介
React16 基础阐述JSX简介组件和普通JSX语法区别JSX中使用三元运算符总结阐述JSX语法,看起来跟 html 标签几乎一样,事实也是如此。JSX语法确实也有很多需要注意的事项,但是对于初学者学太多反而不好。所以本文我们作一个最简单的JSX语法介绍。JSX简介JSX就是Javascript和XML结合的一种格式。React发明了JSX,可以方便的利用HTML语法来创建虚拟DOM,当遇到 <,JSX就当作HTML解析,遇到 { 就当JavaScript解析。比如我们写一段JSX语法原创 2021-12-08 19:11:07 · 240 阅读 · 0 评论 -
P05:HelloWorld和组件的讲解
React16 基础阐述入口文件的编写app组件的编写总结阐述本文先把 src 目录里的文件全部删除,我们一点点写一个·HelloWorld·程序,并通过编写这个程序了解一下什么是React中的组件化编程。入口文件的编写写一个项目的时候一般要从入口文件进行编写的,在 src 目录下,新建一个文件 index.js,然后打开这个文件。写入下面4行代码:import React from 'react'import ReactDOM from 'react-dom'import App from原创 2021-12-08 18:48:03 · 192 阅读 · 0 评论 -
P04:React脚手架生成的项目目录介绍
用脚手架生成目录后,需要对目录有个基本的认识。最起码知道都是作什么用的,否则我们如何编写程序呢?所以本文将带你浏览一下React脚手架生成目录和文件的作用。React16基础项目根目录中的文件public文件夹介绍src文件夹介绍项目根目录中的文件先从进入项目根目录说起,也就是第一眼看到的文件(版本不同,可能稍有不同)README.md这个文件主要作用就是对项目的说明,已经默认写好了一些东西,你可以简单看看。如果是工作中,你可以把文件中的内容删除,自己来写这个文件,编写这个文件可以使用Mar原创 2021-12-07 12:13:20 · 349 阅读 · 0 评论 -
P03:React开发环境搭建
通过之前两篇文章的理论学习,本篇文章开始终于可以进入操作环节了,其实我呢早已经迫不及待了。讲理论就像仿佛认识一个美女,缺点只能让你看,剩下啥都做不了一样。了解我的小伙伴都知道,我一定不是这种性格。接下来就让我们一起动手,把React的开发环境搭建好。在搭建React开发环境前需要你安装 Node,如果你已经安装了可以省略这些步骤。React16基础安装Node.js脚手架的安装创建第一个 React 项目安装Node.js使用React.js是可以用最原始的<Script>标签进行引入原创 2021-12-07 11:35:58 · 257 阅读 · 0 评论 -
P02:React框架和Vue框架对比
ReactJS的官方网站:https://react.docschina.org本文将简单介绍一下React框架,并通过介绍,引出一个大家争执很多的话题,到底什么时候用 React.js ?什么时候用 Vue.js?其实这节课也是偏重于理论的,但是我觉的有必要单独拿出来一篇文章说一说,因为有很多小伙伴还在犹豫,我已经会了Vue,还有没有必要学习React?答案是肯定的,那就是一定要学。因为这套课可能更多的面向新手,所以必要的理论也是不能缺少的。React16 基础教程笔记React 简介Reac原创 2021-12-07 11:10:33 · 485 阅读 · 0 评论 -
P01:React.js教程前言
很高兴你能来到这里学习React.js技术,这是教程的第一节,主要介绍一下小伙伴们常问的一些问题。React17 基础教程笔记(28篇)React 简介React 优点总结需要的前置知识React 简介首先不能否认 React.js 是全球最火的前端框架(Facebook推出的前端框架),国内的一二线互联网公司大部分都在使用React进行开发,比如阿里、美团、百度、去哪儿、网易 、知乎这样的一线互联网公司都把 React 作为前端主要技术栈。React 的社区也是非常强大的,随着 React 的普原创 2021-12-07 10:48:35 · 194 阅读 · 0 评论