前言 从今天开始我们来搞搞状态管理可否，这几天没怎么写博客，因为被病魔战胜了，tmd，突然的降温让我不知所措，大家最近注意安全，毕竟年底了，查的严，呸，大家注意保暖 特别声明：写该文只是写一下用MobX的思路，有很多地方我会直接放官网链接，因为官网已经写的够详细了 首先来个比较简单的，MobX。 引用官网上的一句话：MobX 是一个经过战火洗礼的库，它通过透明的函数响应式编程(transparently applying functional reactiv...
前言 create-react-app是由React官方提供并推荐使用构建新的React单页面应用程序的最佳方式,其构建的项目默认是不支持less的,需要我们手动集成 一、react脚手架搭建 1、先全局安装create-react-app(提前需要安装node) npm install -g create-react-app2、然后通过create-react-app创建项目my-app create-react-app my-app3、最后通过cd进入项目文件夹并启动 cd my-app yarn start4、终端出现如下界面表示启动成功，并在浏览器中输入...
React 中 本地调试React代码的方法 yarn build 场景 假设有这样一个场景，父组件传递子组件一个A参数，子组件需要监听A参数的变化转换为state。 16之前 在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换 16之后 在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听， getDerivedStateFromProps 可以返回 null 或者一个对象，如果是对象，则会更新 state getDerivedStateFromProps...
父组件向子组件传值：父组件： import React, { Component } from react; import Child from ./chlid;class parent extends Component{constructor(props) {super(props);this.state = {txt0:"默认值0",txt1:"默认值1"}}componentDidMount(){}parToson(){this.setState({txt0:"哈哈哈哈"})}sonToPar(e){this.setState({txt1:e})}render(){const style={paddingLeft:"150px"}return(<div style={style}><button onClick={this.parTo...
或许你当前的项目还没有到应用Redux的程度，但提前了解一下也没有坏处 首先我们会用到哪些框架和工具呢？React UI框架 Redux 状态管理工具，与React没有任何关系，其他UI框架也可以使用Redux react-redux React插件，作用：方便在React项目中使用Redux react-thunk 中间件，作用：支持异步action|--src|-- store Redux目录|-- actions.js|-- index.js|-- reducers.js|-- state.js|-- components 组件目录|-- Test.j...
一、前言依赖注入（Dependency Injection）这个概念的兴起已经有很长时间了，把这个概念融入到框架中达到出神入化境地的，非Spring莫属。然而在前端领域，似乎很少会提到这个概念，难道前端的代码就不需要解耦吗？前端的代码就没有依赖了？本文将以 React 的源码为例子，看看它是如何使用依赖注入这一设计模式的。 二、依赖注入的基本概念在看代码之前，有必要先简单介绍一下依赖注入的基本概念。依赖注入和控制反转（Inversion of...
最近有一个场景是Child2组件点击让Child1组件里面的state的值发生改变,Child1是一个公用组件，把里面的state值改为props传递，修改内容太多，容易出错，就想找其他的方法来解决兄弟组件调用方法问题，下面看代码: Child1 是第一个子组件class Child1 extends React.Component {constructor(props) {super(props);this.state = {text:Child1};}onChange=()=>{this.setState({text:Child1 onChange})}componentDidMount(){this.props...
Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。Sass是一个将脚本解析成CSS的脚本语言，即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”，与Haml类似，使用缩进来区分代码块，并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下...
最近好多伙伴说，我用vue做的项目本地是可以的，但部署到服务器遇到好多问题：资源找不到，直接访问index.html页面空白，刷新当前路由404。。。用react做的项目也同样遇到类似问题。现在我们一起讨论下单页面如何部署到服务器？ 由于前端路由缘故，单页面应用应该放到nginx或者apache、tomcat等web代理服务器中，千万不要直接访问index.html，同时要根据自己服务器的项目路径更改react或vue的路由地址。 如果说项目是直接跟在域名后...
基于vue和react的spa进行按需加载 由于最近打算将所有的管理系统采用同一套登陆方法，然后在登陆后进行系统的切换选择，不需要每个系统都去重新登陆一次，所以前端这边思考将所有的系统用一套spa的应用进行构建，但是各个系统的合并之后，打包后的代码应该是相当大的，单页需要一次性加载所有系统的资源，显得不合实际，所以打算将不同系统的资源进行分离，再选择后在加载该系统的相应资源。自己发现这个业务和每个系统的路由比较类...
在React搭建的SPA项目中页面的title是直接写在入口index.html中，当路由在切换不用页面时，title是不会动态变化的。那么怎么让title随着路由的切换动态变化呢？1.在定义路由时增加title属性。{path: "/regularinvestment",component: Loadable({loader: () => import(./../../business/Regularinvestment/index),loading: PageLoading}),title: "这是自定义的标题"} 2.在路由的index.js获取到自定义的title设置页面标题即可。const...
React性能优化思路软件的性能优化思路就像生活中去看病，大致是这样的： 使用工具来分析性能瓶颈（找病根） 尝试使用优化技巧解决这些问题（服药） 使用工具测试性能是否确实有提升（疗效确认） 初识react只是为了尽快完成项目，后期进行代码审查时候发现有很多地方需要优化，因此做了个小结。 Code SplittingshouldComponentUpdate避免重复渲染使用不可突变数据结构组件尽可能的进行拆分、解耦列表类组件优化bind函数优化不要滥用...
create-react-app慢的解决方法 在操作官方实例Create React App时,需要执行指令： create-react-app my-app来创建一个新的React应用。由于某原因,在拉取各种资源时,往往会巨慢,一直卡在 fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch解决方案是换源,虽然平常使用cnpm来代替npm,但也只是使用新的指令而已，而在寻求create-react-app的相关配置希望修改registry时失败了，最后发现create-react-app...
前言 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 本文主要介绍了关于react在安卓输入框被键盘遮挡的相关内容，分享出来动大家参考学习，下面话不多说了，来一起看看详细的介绍吧 问题概述今天遇到了一个问题，在安卓手机上，当我要点击输入“店铺名称”时，手机软键盘弹出来...
react native 官网介绍了这个 api Geolocation 但是这个api只能返回 经纬度 所以要把经纬度 通过逆地理位置转义 http://recode.ditu.aliyun.com/jsdoc/geocode_api.html 可通过这个阿里的开放接口 在 react native 中，我们所用的是react native 自带的api定位功能，无需引入第三方js。 react native 定位是通过Geolocation这个模块来实现的。想了解更多关于Geolocation的知识请点击下面 Geolocation自行了解，这里我们主要将他的几...