React
文章平均质量分 72
W Y L
这个作者很懒,什么都没留下…
展开
-
React 中使用CSS的7种方法
第一种: 在组件中直接使用style不需要组件从外部引入css文件,直接在组件中书写。import React, { Component } from "react";const div1 = { width: "300px", margin: "30px auto", backgroundColor: "#44014C", //驼峰法 minHeight: "200px",...原创 2020-01-13 16:08:44 · 650 阅读 · 0 评论 -
React性能优化
一、事件的优化1、构造函数中声明export default MyCom extends Component{ constructor(){ super() this.fun = this.fun.bind(this) } render(){ return( <div onClick={thi...原创 2020-02-05 11:38:50 · 119 阅读 · 0 评论 -
在React中实现条件渲染的方法
1、 if-else我们可以将if-else条件逻辑应用于React中的JSX。请记住,JSX在执行之前已经编译为JS,因此我们实际上是在用JS代码编写。例如:var globalVar = truefunction App() { if(globalVar) { return <div>If Rendering</div> } else { return <div>Else Rendering</div>原创 2020-05-31 21:07:21 · 198 阅读 · 0 评论 -
react脚手架配置代理总结
方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明:优点:配置简单,前端请求资源时可以不加任何前缀。缺点:不能配置多个代理。工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)方法二第一步:创建代理配置文件在src下创建配置文件:src/setupProxy.js第二步:编写setupProxy.js配置具体代理规则:const proxy = requir原创 2021-08-20 09:38:08 · 85 阅读 · 0 评论 -
React 脚手架
React 脚手架使用create-react-app创建react应用react脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置(语法检查、jsx编译、devServer…)下载好了所有相关的依赖3.可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库: create-react-app项目的整体技术架构为: react + webpack + es6 + eslint使用脚手架开发的项目的特点: 模块化, 组件原创 2021-08-19 10:19:42 · 154 阅读 · 0 评论 -
react生命周期
react生命周期引出生命周期钩子二级目录三级目录引出生命周期钩子案例:让指定的文本做显示 / 隐藏的渐变动画,点击“不活了”按钮从界面中卸载组件效果图:<script type="text/babel"> // 创建组件 // 生命周期回调函数 <=> 生命周期子函数 <=> 生命周期函数 <=> 生命周期钩子 class Life extends React.Component{ state = { opacity原创 2021-08-11 14:12:32 · 99 阅读 · 0 评论 -
React之旅基础篇(四)
React之旅基础篇(四)事件处理收集表单数据受控组件非受控组件高阶函数 函数柯里化不适用函数的柯里化事件处理通过onXxx属性指定事件处理函数(注意大小写)React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 — 为了更好的兼容性React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) — 为了高效通过event.target得到发生事件的DOM元素对象 — 不要过度使用ref class Demo extends React.Component {原创 2021-08-06 11:53:40 · 109 阅读 · 0 评论 -
React之旅基础篇(三)
React之旅基础篇(三)React组件函数式组件类式组件组件三大核心属性stateReact组件理解组件:用来实现局部功能效果的代码和资源的集合(html/css/js/image…)注意:定义函数组件的时候首字母需要大写函数必须有返回值在渲染组件的时候要写Demo标签,必须有结束标签虚拟DOM元素只能有一个根元素函数式组件创建函数式组件渲染组件到页面渲染类组件标签的基本流程React解析组件标签,找到了Demo组件发现组件是使用函数定义的,随后调用该函数,将返回的虚拟原创 2021-07-23 09:32:35 · 330 阅读 · 0 评论 -
React之旅基础篇(二)
React之旅基础篇(二)JSX语法规则JSX练习模块与组件、模块化与组件化的理解React开发者工具调试JSX语法规则定义虚拟DOM时,不要加引号标签中混入js表达式时要用{}样式的类名指定不要用class。要用className内联样式,要用style={{key:value}}的形式去写只有一个根标签标签必须闭合标签首字母若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报原创 2021-07-09 17:30:19 · 96 阅读 · 0 评论 -
React之旅基础篇(一)
React之旅基础篇1React简介是什么?谁开发的?为什么学?React入门相关js库效果创建虚拟DOM的两种方式jsx方式js方式虚拟DOM与真实DOMReact简介英文文档:react英文文档中文文档:react中文文档是什么?用户构建用户界面的JavaScript库是一个将数据渲染为HTML视图的开源JavaScript库谁开发的?由FaceBook开发,且开源为什么学?原生js的痛点:原生js操作DOM繁琐 效率低 (DOM-API 操作 UI)jq仅仅只是代码原创 2021-06-30 16:57:25 · 81 阅读 · 0 评论