react

一、组合与继承 概念：将组件的开标签与闭标签之间的内容展示在组件的内部进行展示,通过prop传递。（父组件中定义子组件的内容，类似于vue中的插槽slot） 形式 包含关系 渲染其他组件 //父组件 import ChildA from './childA.jsx' class Father extends Component { state = {} render(){ let Acom = <a href="#">这是一个a标签组件</a> return <div className="extend-father" style={{border:'1px solid #000'}}> father content <ChildA Acom={Acom}> <h1>包含关系：嵌入内容</h1> </ChildA> </div> } } // 子组件 class ChildA extends Component { constructor(props){ super(props) this.state = {} } render(){ return <div style={{backgroundColor:'orange'}}> hello world! {/* 包含关系 */} {this.props.children} {/* 渲染其他组件 */} {this.props

前端框架搭建脚手架（react脚手架） 1、https://www.rails365.net/articles/kai-fa-react-ying-yong-zui-hao-jiao-shou-jia-create-react-app （开发 react 应用最好用的脚手架 create-react-app） 2、类似这样的脚手架，我扫了网络上比较多人用和关注的，一共发现了三个，它们分别是： react-boilerplate react-redux-starter-kit create-react-app 3、http://www.jianshu.com/p/5e6c620ff4d6 （Create-React-App创建antd-mobile开发环境） 4、https://www.cnblogs.com/ye-hcj/p/7191153.html （react.js 之 create-react-app 命令行工具系统讲解） 5、http://blog.csdn.net/cy5849203/article/details/78040257 （使用 create-react-app 构建 react应用程序 （react-scripts）） 6、https://www.cnblogs.com/wonyun/p/6030090.html （html-webpack-plugin详解

学还是要学的，用的多了，也就有更多的认识了，开发中遇到选择的时候也就简单起来了。 本文作者也做了总结： 如果你喜欢用（或希望能够用）模板搭建应用，请使用Vue 如果你喜欢简单和“能用就行”的东西，请使用Vue 如果你的应用需要尽可能的小和快，请使用Vue 如果你计划构建一个大型应用程序，请使用React 如果你想要一个同时适用于Web端和原生App的框架，请选择React 如果你想要最大的生态圈，请使用React 如果你已经对其中一个用得满意了，就没有必要换了 2016年，React在Web端和移动端都实现了迅速的成长，稳稳地领先于其主要竞争对手Augular，巩固了其作为前端框架之王的地位。 但是Vue在这一年里的表现也可谓同样的耀眼。Vue.js 2.0 的发布在整个 JavaScript 社区都引起了巨大反响，这一点仅从它在Github中涨了25,000颗star，就足以得到证明。 不得不说React和Vue的使用范围是相似的：都是基于组件化的轻量级框架，都专注于构建用户界面的视图层；都既可以用于简单的项目，也适用于使用前沿技术的大规模复杂项目。 因此，很多Web开发者都难免纠结到底要从中选择哪一个框架。这两者中能否分出个高下好坏？或者它们各自有哪些优缺点是需要我们注意的？还是说它们实际上差不多，用谁都一样？ 两种框架，两个拥护者 在这篇文章中我想用尽可能公平

angular：1、在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。 vue：1、轻量级框架 2、在性能上，Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。3、在状态管理方面,使用的是vuex 3、vue比angular和react的运行速度快。 react：1、React采用特殊的JSX语法。2、React采用特殊的JSX语法，React采用的Virtual DOM会对渲染出来的结果做脏检查。3、在状态管理方面，使用的是Redux 来源： CSDN 作者： wang_liuyong 链接： https://blog.csdn.net/wang_liuyong/article/details/104636882

一、从 数据 到 虚拟dom vue和react都是数据决定虚拟dom，进而决定ui。但是二者的实现思路不一样。 1.vue的思路 捕获变量的赋值和取值操作，在赋值和取值操作中，利用发布--订阅模式更新虚拟dom，进而更新ui。 捕获变量的赋值和取值操作，又叫作 数据劫持 。 如何捕获变量的赋值和取值操作呢？ let person = { name: "lrx" }; Object.defineProperty(person,'name',{ set:function(value){ name = value; console.log('每次执行对name的赋值操作，我都会执行'); }, get:function(){ console.log('每次执行对name的取值操作，我都会执行'); return name; } }) person.name = '良纵'; 2.react的思路 react的数据更新是用setState来做的，利用setState对数据进行赋值的时候，会触发domdiff，在根据 shouldComponentUpdate 返回值是true/false来决定要不要更新虚拟dom。 所以，vue的更新是添加监控的方式，性能优化是由框架源码去做的；react的性能优化交给了开发者（shouldComponentUpdate），所以在开发大型应用时

react生命周期的整个过程和vue的类似 Mounting :已插入真实 DOM,Updating:正在被重新渲染,Unmounting:已移出真实 DOM 具体的回掉函数及运行时机： componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。 componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。 shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。 componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。 componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

将react-router-dom升级至5.x后，发现除去路由组件外的其他组件，无法直接获取history、location、match等相关属性。 一、组件该如何获取history等属性 import React, {Component} from 'react' class Father extends Component { constructor(props) { super(props) } render() { return <App> <Route path="/example" componnet="Example" /> </App> } ... } export default Father 此时， Example 就是一个路由组件，可直接通过props直接获取history等属性。 其他组件 的获取方法 此处先假设：Foo 为 Example 的子组件， FooChild 为 Foo 的子组件。 针对Father、App、Foo、FooChild这些其他组件，获取方法通常涉及以下三种。 1、若组件为路由组件的子组件，可直接用props传值。 此方法一大弊处在于：若FooChild组件需要这些属性，而Foo组件并不需要这些属性，这种传值方式就显得很冗余，因为需要一层一层传值。 2、使用withRouter：专门用来处理数据更新问题。 当路由的属性值

1.安装 cnpm i react-loadable -S 2.在detail文件中新建loadable.js import Loadable from 'react-loadable' import React from 'react' const LoadableComponent = Loadable({ loader:()=>import('./'), loading(){ return <div>正在加载</div> } }) export default ()=><LoadableComponent/> 3.App.js中 import Detail from './pages/detail/loadable' 4.detail/index.js 解决参数 import {withRouter} from 'react-router' export default connect(mapState, mapDispath)( withRouter(Detail) ) 来源： CSDN 作者： 写代码的小哥哥 链接： https://blog.csdn.net/qq_36249659/article/details/104631262

React 组件 关于创建项目，可以选择手动创建和通过脚手架来创建。这里给一个传送门 → 通过React 脚手架创建项目 我们先来编写第一个 react 程序 // 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React import React from 'react' // ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中引入的，而不是从 react 引入。 import ReactDOM from 'react-dom' // ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上 ReactDOM.render( // 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSX- JavaScript XML。 <h1>欢迎进入React的世界</h1>, // 渲染到哪里 document.getElementById('root') )

redux Redux 是 JavaScript 状态容器，提供可预测化的状态管理。相当于vue的vuex，可以跨组件、跨页面推送数据。应用场景如：购物车、会员登录等功能模块。 Redux 由 Flux 演变而来，避开了 Flux 的复杂性。 不管你有没有使用过它们，只需几分钟就能上手 Redux。 Redux 的基本思想是整个应用的 state 保持在一个单一的 store 中。store 就是一个简单的 javascript 对象，而改变应用 state 的唯一方式是在应用中触发 actions，然后为这些 actions 编写 reducers 来修改 state。整个 state 转化是在 reducers 中完成，并且不应该有任何副作用。 安装： npm install redux --save npm install react-redux --save redux-thunk redux-thunk 则可以用来延迟 action 的派发(dispatch)，这可以处理异步 action 的派发(dispatch)。 安装： npm install --save-dev redux-thunk umi-request 网络请求库，基于 fetch 封装, 兼具 fetch 与 axios 的特点, 旨在为开发者提供一个统一的api调用方式, 简化使用, 并提供诸如缓存,