![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
十七.React
庚中
这个作者很懒,什么都没留下…
展开
-
react 原生上传方法
react 原生上传方法import React, {Component} from 'react';class FetchUpload extends Component { constructor(props) { super(props); this.fileInput = React.createRef(); } upload...原创 2019-12-04 10:42:13 · 508 阅读 · 0 评论 -
SSR服务器端渲染(Next.js总结和豆瓣电影项目)
一.前言先解释一下Nuxt.js和Next.js虽然只有一个字母之差,但它们是不同的两个服务端渲染框架.什么是Next.js?引用Next中文官网的一句话:Next.js 是一个轻量级的 React 服务端渲染应用框架。Next.js带来了很多好的特性:默认服务端渲染模式,以文件系统为基础的客户端路由(注意:没有专门路由)代码自动分割使页面加载更快以webpack的热替换(HMR...原创 2019-10-29 22:35:00 · 1934 阅读 · 0 评论 -
SSR服务器端渲染(Nuxt.js总结和豆瓣电影项目)
引言开始之前,我们先了解一下普通前端渲染过程:而加了SSR的服务器渲染过程:明显请求次数变少了,速度更快.那接下来隆重介绍服务端渲染什么是服务器端渲染前端渲染:html页面作为静态文件存在,前端请求时后端不对该文件做任何内容上的修改,直接以资源的方式返回给前端,前端拿到页面后,根据写在html页面上的js代码,对该html的内容进行修改。服务端渲染:前端发出请求后,后端在将HTM...原创 2019-10-26 00:54:38 · 1223 阅读 · 0 评论 -
mobx总结和购物车案例
Mobx是什么?Mobx是一个简单的,可扩展的javascript状态管理库.和redux,vuex等状态管理类似.hello world 开始初始化创建项目create-react-app 项目名安装改变默认脚手架的webpack配置文件yarn add -D react-app-rewired customize-cra @babel/plugin-proposal-decor...原创 2019-10-24 17:38:13 · 755 阅读 · 0 评论 -
Taro小程序学习总结
1. Taro1.1. 介绍官网开发文档Taro 是一套遵循 React 语法规范的 多端开发 解决方案。由京东的凹凸实验室团队于 2018-09-18 历时 3 个月正式发布。taro 的目标是使用一套代码达到多端统一。多端:微信小程序H5React Native支付宝小程序百度智能小程序快应用 适配中2. 运行项目2.1. 安装脚手架工具@...原创 2019-10-15 18:26:29 · 1386 阅读 · 0 评论 -
慕课网redux笔记
一.redux介绍二.代码1.安装原创 2019-07-07 00:35:15 · 127 阅读 · 0 评论 -
react中的运算符&&的使用
先看一段代码:function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( <div> <h1>Hello!</h1> {unreadMessages.length > 0 && <...原创 2019-09-05 16:43:45 · 5591 阅读 · 0 评论 -
react小技巧动态改变值的两种方法
动态改变两种值的方法1.对象方式,简单this.setState({ showWarning:!this.state.showWarning })2.函数方式返回 this.setState((state)=>{ console.log(state);//就是state对象 return{ ...原创 2019-09-05 17:21:01 · 3086 阅读 · 0 评论 -
简书项目(一,头部组件,阿里图标,过渡动画)
创建初始项目styled-components的使用发现在index.css写一个类名,在子文件App.js里引用这个类名也会生效,这样样式会有全局污染,所以我们采用styled-components来规范样式1.安装styled-componentsyarn add styled-components2.使用css文件变为js文件效果:引入PC各个浏览器的统一基础样式...原创 2019-09-11 13:21:04 · 246 阅读 · 0 评论 -
简书项目(二,redux的使用)
使用redux管理focused状态的过程:1.创建基础功能安装redux,react-reduxyarn add redux react-redux创建仓库store管理员reducer组件中引入仓库在子组件中进行链接使用react-redux里的connect方法进行和父组件进行链接.connect()方法里接收两个参数:mapStateToProps和mapDis...原创 2019-09-11 14:51:25 · 154 阅读 · 0 评论 -
react脚手架增加less预处理器和babel按需加载的方法
1.先暴露config文件,命令yarn eject 2.在webpack.config.js里配置好后在终端安装yarn add less-loader less --save即可.增原创 2019-07-09 13:12:09 · 646 阅读 · 0 评论 -
JSPang-React学习总结(一.高级)
一.PropTypesProp验证父子组件的传值类型.使用方法:1.在使用需要先引入PropTypes。import PropTypes from 'prop-types'2.如果父到子组件传值的话,直接在子组件的类外面写入如下代码:XiaojiejieItem.propTypes={content:Proptypes.string,index:PropTypes.number,...原创 2019-06-19 00:33:45 · 2096 阅读 · 0 评论 -
React-form表单里的文本框,单选和双选受控组件的封装
效果:<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Hello React!</title><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.developmen...原创 2019-06-19 21:46:54 · 568 阅读 · 0 评论 -
React-弹框组件的制作
效果:代码实现:class MyDialog extends React.Component { constructor(props){ super(props); } render() { const container = { position: 'absolute', top: '30px', left: '50%', ...原创 2019-06-20 22:15:09 · 2799 阅读 · 0 评论 -
React-组件的提取
提取的好处是函数可以复用,实现效果:内部完整代码:<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/rea...原创 2019-06-21 15:44:33 · 1248 阅读 · 0 评论 -
React-计时器
效果:完整代码:<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Hello React!</title><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.deve...原创 2019-06-21 16:19:29 · 2191 阅读 · 0 评论 -
React-官网简易开关
效果:注意点:this.setState(),里面有三种写法完整代码:<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Hello React!</title><script src="https://cdn.staticfile.or...原创 2019-06-21 17:47:05 · 221 阅读 · 0 评论 -
推荐一个非常好用的在线模拟数据接口
官方网站:https://www.easy-mock.com使用方法:登录后创建接口,在编辑接口里写自己想要的数据.最后加上接口名称访问即可.get请求案例:https://www.easy-mock.com/mock/5d09c84de0b02639f37c9e4c/example/login...原创 2019-06-25 23:32:34 · 18674 阅读 · 6 评论 -
React-路由的使用
react英文版官网: https://reacttraining.com/react-router/一.仿照官网来个小案例1.安装React路由cnpm i --save react-router-dom2.创建一个新的router.js文件,并在App.js中导入这个路由文件3.在router.js文件中粘贴官方的第一个路由案例;import React from "react...原创 2019-06-26 09:18:03 · 4625 阅读 · 0 评论 -
React-redux总结
一.Redux介绍Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用(SPA)开发日趋复杂,JavaScript需要管理比任何时候都要多的state(状态),Redux就是降低管理难度的。二.Redux工作流程官网图:老司机图:解释:React Components就相当于大官人,然后我们去作“大宝剑”,我们先见到的是Act...原创 2019-07-19 13:13:35 · 193 阅读 · 0 评论 -
React-myhome项目总结(一.登录页)
一.项目启动1.安装项目creact-react-app myhome2.删除用不到的文件serviceWorker.js,App.test.js和logo.svg3.提示,windows电脑修改端口的方法:在package.json文件里增加"set PORT =端口名"即可(其它系统用cross-env插件来实现)cross-env的使用用法:a.安装cnpm instal...原创 2019-06-26 22:44:22 · 283 阅读 · 0 评论 -
React-表单(受控组件和非受控组件)
一,受控组件<input>,<textarea>, 和 <select>是受控组件,因为这类表单元素会维持自身状态,并根据用户输入进行更新,在React中,可变的状态通常保存在组件的状态属性中,并且只能用 setState() 方法进行更新,我们可以通过使react变成一种单一数据源的状态来结合二者,React负责渲染表单的组件控制用户后续输入时所发生的变化。...原创 2019-06-26 11:32:27 · 2541 阅读 · 0 评论 -
JSPang-React学习总结(一.进阶)
一.React中JSX语法内部创建标签原理:<ul className="my-list"> <li>JSPang.com</li> <li>I love React</li></ul>//上述的react内部创建过程var child1=React.createElement('li',null,'J...原创 2019-06-19 00:18:54 · 1317 阅读 · 0 评论