架构师的成长之路

对mvc，mvp，mvvm框架设计思想有深入的了解，是前端开发工程所必备的。MVC通信方式如下：View 传送指令到 Controller Controller 完成业务逻辑后，要求 Model 改变状态 Model 将新的数据发送到 View，用户得到反馈例子如下：<h1>Number: <span id="num"></span&g...

创建一个示例RN应用程序，从Expo的create-react-native-app（CRNA）开始，并将其配置为使用Typescript开发我们的RN代码。1.使用CRNA创建React Native项目$ yarn global add create-react-native-app打开终端，并cd选择您的工作文件夹。运行以下命令以创建新的React Native项目：...

react 子组件引入父组件加不上类名         function inject_unount (target) { // 改装componentWillUnmount，销毁的时候记录一下let next = target.prototype.componentWillUnmounttarget.prototype.componentW...

react为何移除mixin，本文主要介绍minix的弊端。mixin引入了隐式依赖关系 有时候组件依赖于mixin中定义的某个方法，比如getClassName()。有时情况正好相反，mixin会在组件上调用renderHeader()之类的方法。JavaScript是一种动态语言，因此很难强制或记录这些依赖关系。 mixin打破了通常安全的假设，即可以通过搜索组件文件...

高阶组件（HOC）是react中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React API。它只是一种模式，这种模式是由react自身的组合性质必然产生的。具体而言，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。新组件承受业务逻辑，并将数据传入给接收的组件，接收的组件变成UI组件，只负责使用数据，而生成的新组件称为容器组件。原来react使用混入（mixi...

style-components在react中用来做样式组件，很有用，拿来给大家讲一下。安装首先下一个包：npm install --save styled-components使用创建组价以及根据属性加样式import React ,{Component} from 'react'import styled from 'styled-components';con...

在React-Router中Link无法指定生成的元素类型，那么我们可以封装一个，就可以实现Vue-router中tag的功能。一下代码中是有了react中的样式组件，需要安装：yarn add style-component -s封装代码：import React from 'react'import { NavLink, Route, withRouter } from...

本文将讨论如何在react项目中使用React-Router实现路由切换。（使用的React-Router是4.0版本）。在react中安装React-Router//如果你使用yarnyarn add react-router-dom//如果你使用npmnpm install react-router-dom完整代码import React, { Componen...

看到网上都是老版的context，发一篇最新的context的使用及小例子。Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。在一个典型的 React 应用中，数据是通过 props 属性由上向下（由父及子）的进行传递的，但这对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI主题），这是应用程序中许多组件都所需要的。 Contex...

在11月14日-16日于多伦多举办的 VueConf TO 2018 大会上，尤雨溪发表了名为 “ Vue 3.0 Updates ” 的主题演讲，对 Vue 3.0 的更新计划、方向进行了详细阐述。目前该演讲的 PPT 也已上传至 Google 文档，感兴趣的可点此查阅。 可以看到，Vue 3.0 将会：1、更快 Virtual DOM 完全重写，mounting &amp;...

在react项目中配置Eslint在package.json文件中进行如下配置 "eslintConfig": { "extends": "react-app", "rules":{ "no-console":1 } },比如这个，配置了不让输出，否则会warningeslint规则（no-console的值）："off" 或者

 redux是一个架构模式/状态管理模式，借鉴了flux，在使用的时候需要去搭建redux结构，本文将着重介绍redux在react中应用。 Redux思想store是管理全局状态的，视图可以获取到store的状态，视图产生用户操作后会调用actionCreator的方法来生成一个action，将其dispatch派发给store store会将当前的状态和此次的action交给r...

在react中，我们主要使用react-transition-group实现动画过度效果，本文将讨论如何在react项目中实现过度动画效果。安装# npmnpm install react-transition-group --save# yarnyarn add react-transition-group官方提供的三个组建Transition,CSSTransitio...

生命周期的重要性，对于学习框架的重要性，就不多说了，下面主要讲一下react的生命周期中的这些钩子函数的基本用法。话不多说，先上图：react组件的构造import React,{ Component } from 'react';//因为编译时要用到React，所以必须要引入 class Demo extends Component { const...

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。方法一param传递参数（get方式）getDescribe(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`, ...

本文主要讨论了Vue的生命周期及每个生命周期可以做什么，学好Vue，必须学好生命周期。图示：说明如下：&lt;body&gt; &lt;div id="app"&gt; &lt;my-component&gt;&lt;/my-component&gt; &lt;/div&gt; &lt;template id="component&q

目录布局写法React-Native 样式指南Properties 属性Text 文本Dimension 尺寸Positioning 定位Margin 外部白Padding 内部白Border 边框Background 背景Transform 转换Flexbox 弹性盒Other 其他Valuse 取值Color 颜色Number 数...