项目文件准备： 执行npm init,然后创建如下图所示的文件。在index.html里面添加 <!DOCTYPE html> <html><head><title>The Minimal React Webpack Babel Setup</title></head><body><div id="app"></div><script src="./bundle.js"></script></body> </html>在webpack.config.js里面添加 module.exports = {entry: ./src/index.js,output: {path: __dirname + /dist,publicPath: /,filename: bundle.js},devServer: {contentBase: ....
简单介绍 首先本文不会对webpack代码进行解释，其所有配置都可以在文档上找到。 平时工作中会写一些多页面应用，因为习惯了react的开发模式，故此写了一个简单的配置，跟大家一起分享。如果你也喜欢，对你的开发有所帮助，希望给点鼓励（start） github地址：https://github.com/ivan-GM/Gm-cli 项目目录介绍：打包后文件目录：打包成cli如果你厌烦了新项目的复制、粘贴，也可以构建成cli 1，首先创建个文件夹，npm init初始化项目...
前言首先，为什么我需要做这个项目准备工作呢？因为常年习惯React开发的我，最近突然接手了一个Vue项目，而之前基本没有过Vue的实践，这么突兀让还在沉溺于React开发的我进行Vue开发，甚是不习惯，那自然我需要想办法让Vue开发尽量与React相似，这样大概让自己在开发过程中更得心应手吧。 组件开发特性对比众所周知，Vue和React都有那么一个特性，那就是可以让我们进行组件化开发，这样可以让代码得到更好的重用以及解耦，在架构定...
用表格进行页面布局,页面布局在各种浏览器的的兼容性, 都非常好, 而在react中使用表格布局, 合并单元格的写法比较特殊, 博主查了很久才找到正确的写法, 在这里分享一下 效果图源码 react组件文件 import React, {Component } from react;import ./App.css;class App extends Component {render() {return (<div className="App"><div className="title">4*4表格</div><table><tbody><tr><td>00</td><td>01</td><td>02</td><td>03</...
最近在开发一个服务端渲染工具，通过一篇小文大致介绍下服务端渲染，和服务端渲染的方式方法。在此文后面有两中服务端渲染方式的构思，根据你对服务端渲染的利弊权衡，你会选择哪一种服务端渲染方式呢？ 什么是服务器端渲染 使用 React 构建客户端应用程序，默认情况下，可以在浏览器中输出 React 组件，进行生成 DOM 和操作 DOM。React 也可以在服务端通过 Node.js 转换成 HTML，直接在浏览器端“呈现”处理好的 HTML 字符串，这个...
在开发React组件的过程中，我们经常会遇到这个问题：什么情况下组件会重新渲染？ 当内部data发生改变，state发生改变(通过调用this.setState()) 以及父组件传过来的props发生改变时，会导致组件重新渲染。 以下几个问题同样值得我们思考：setState()函数在任何情况下都会导致组件重渲染吗？如果setState中的state没有发生改变呢？ 如果state和从父组件传过来的props都没变化，那他就一定不会发生重渲染吗？ 首先，我们来解决这两个...
使用antd按需加载使用react-app-rewired对 create-react-app 的默认配置进行自定义 1、yarn add react-app-rewired --dev /* package.json */ "scripts": { - "start": "react-scripts start", + "start": "react-app-rewired start", - "build": "react-scripts build", + "build": "react-app-rewired build", - "test": "react-scripts test --env=jsdom", + "test": "react-app-rewired test --env=jsdom", }2.然后在项目...
前言 从今天开始我们来搞搞状态管理可否，这几天没怎么写博客，因为被病魔战胜了，tmd，突然的降温让我不知所措，大家最近注意安全，毕竟年底了，查的严，呸，大家注意保暖 特别声明：写该文只是写一下用MobX的思路，有很多地方我会直接放官网链接，因为官网已经写的够详细了 首先来个比较简单的，MobX。 引用官网上的一句话：MobX 是一个经过战火洗礼的库，它通过透明的函数响应式编程(transparently applying functional reactiv...
Redux-Sagaredux-saga 是一个用于管理应用程序副作用（例如异步获取数据，访问浏览器缓存等）的javascript库，它的目标是让副作用管理更容易，执行更高效，测试更简单，处理故障更容易。 redux-saga相当于一个放置在action与reducer中的垫片。 之所以称之谓副作用呢，就是为了不让触发一个action时，立即执行reducer。也就是在action与reducer之间做一个事情，比如异步获取数据等。 redux-saga使用了ES6中的Generator功能，避免了像...
1. 利用react-native 事件DeviceEventEmitter 监听广播应用场景： - 表单提交页面， A页面跳转到B页面选人， 然后返回A页面， 需要将B页面选择的数据传回A页面。 - 多个多媒体来回切换播放，暂停后二次继续播放等问题。代码如下：A页面componentDidMount() {// 利用DeviceEventEmitter 监听 concactAdd事件this.subscription = DeviceEventEmitter.addListener(concactAdd, (dic) => {// dic 为触发事件回传回来的数据// 接收到 up...
前言 最近项目基本都是用 React，今天总结分享 React Component 常见的几种形式，如果你在写 React 时经常不知道怎么拆分代码，这篇文章或许对你有所帮助。 React.Component是一个抽象基类。这意味着直接引用React.Component是毫无意义的。你可以实现一个它的子类，并且至少定义一个render()方法即可使用。 为了更充分理解 React，先搞懂平时写的 JSX 是什么。初学的时候有比较大困惑，这是一门新语言吗？大部分人是匆匆扫过文档就...
对于一个展示页面来讲, 通常有好几种展示状态(以列表页为例): 数据为空, 空页面取数据时发生错误, 错误页面数据正常加载状态针对以上三种情况, react渲染列表的时候要正确判断并渲染出相应的视图, 也就是条件渲染. 不同于vue的v-if, v-show等框架提供的api, react的条件渲染都是js原生的再加上一点点的hack. 比如react文档提到的. if/else, && 和三目等等. 当然上面的都是常用的一些方法, 但是也存在着各种问题, 比如条件分支过多的...
我们在做前端表单提交时，经常会遇到要对表单中的数据进行校验的问题。如果用户提交的数据不合法，例如格式不正确、非数字类型、超过最大长度、是否必填项、最大值和最小值等等，我们需要在相应的地方给出提示信息。如果用户修正了数据，我们还要将提示信息隐藏起来。有一些现成的插件可以让你非常方便地实现这一功能，如果你使用的是knockout框架，那么你可以借助于Knockout-Validation这一插件。使用起来很简单，例如我下面的这一...
create-react-app(简称cra)已经更新之2.0.3版本, babel也更新至7.x版本, JavaScript装饰器语法虽然还不是标准, 但是借助于babel, 也能在项目里愉快的玩耍. cra2.0时代如何启用装饰器语法呢? 我们依旧采用的是react-app-rewired, 通过劫持webpack cofig对象, 达到修改的目的. yarn add react-app-rewired修改package.json "scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-r...
在渲染列表时，React的差异比较算法需要一个在列表范围内的唯一key来提高性能（通常用于获知哪个列表项改变了）。这个唯一的key需要我们手动提供。React官方建议使用列表数据中可用于唯一性标识的字段来作为列表项渲染时的key。如果实在没有，则可使用数组的index勉为其难，性能上可能会打折扣。 一个例子 有这样的一个场景如下图所示，有一组动态数量的input，可以增加和删除和重新排序，数组元素生成的组件用index作为key的值，例...