![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 96
liangklfang
https://github.com/liangklfangl
展开
-
React中prop和state的区别
本文章已收录于: React知识库需要理解的是,props是一个父组件传递给子组件的数据流,这个数据流可以一直传递到子孙组件。而state代表的是一个组件内部自身的状态(可以是父组件、子孙组件)。改变一个组件自身状态,从语义上来说,就是这个组件内部已经发生变化,有可能需要对此组件以及组件所包含的子孙组件进行重渲染。而props是父组件传递的参数,可以被用于显示内容,或转载 2016-10-24 18:00:26 · 958 阅读 · 0 评论 -
使用React的static方法实现同构以及同构的常见问题
代码地址请在github查看,如果有新内容,我会定时更新,也欢迎您star,issue,共同进步原创 2017-06-03 17:02:22 · 10047 阅读 · 0 评论 -
React基础知识之Ref回调函数处理
代码地址请在github查看,如果有新内容,我会定时更新,也欢迎您star,issue,共同进步1.为DOM元素添加Refreact支持一个ref属性,该属性可以添加到任何的组件上。该ref属性接收一个回调函数,这个回调函数在组件挂载或者卸载的时候被调用。当ref用于一个HTML元素的时候,ref指定的回调函数在调用的时候会接收一个参数,该参数就是指定的DOM元素。如下面的例子使用ref回调函数来保翻译 2017-06-04 12:30:33 · 20096 阅读 · 3 评论 -
react-router服务端渲染原理初探
react-router服务端渲染原理初探原创 2017-04-22 11:26:05 · 4863 阅读 · 0 评论 -
react-route中renderProps内部结构与服务端渲染总结
最新内容请在github阅读,我会定时更新这部分的内容。给您带来不便,请见谅~~~~ 下面是react-router的match方法中的renderProps属性的内部签名: 其中renderProps包含routes,params,location,components,router,matchContext属性。 { //renderProps包含routes对象 rout原创 2017-05-11 20:30:36 · 5645 阅读 · 0 评论 -
React技术栈进阶之路之设计模式篇
1.Redux导致的组件多余的渲染问题请仔细阅读React 组件间通讯的文章的最后一个例子,最后的输出结果为:这是因为在最后一个定时器中是如下的代码: setTimeout(() => { store.dispatch({ type: 'child_2_1', data: 'bye' }) }, 2000);此时你必须了解redux原创 2017-07-01 09:22:14 · 5862 阅读 · 1 评论 -
react的context更新而组件不更新的解决方案
代码地址请在github查看,也欢迎您star,issue,共同进步!1.react中父组件的shouldComponentUpdate返回false在React的Context API中,如果context中属性发生变化,而父组件的shouldComponentUpdate返回false,那么该父组件中所有子组件都不会监测到conext的变化,从而不会reRender。比如下面的例子中,我们的Th原创 2017-05-27 17:17:30 · 12565 阅读 · 0 评论 -
教你如何优雅的使用React的context属性
项目代码和最新内容,请在我的github阅读,也欢迎您star, issue对于React的context的基本用法可以参考我的: react的context更新而组件不更新的解决方案。首先:我们来介绍一个高阶函数,该函数对我们的原始组件进行装饰,并提供了访问应用context中的相应声明: Inject.contextTypes = { data: React.PropTypes.obje原创 2017-07-01 17:15:15 · 10080 阅读 · 1 评论 -
React路上遇到的那些问题以及解决方案
问题1:首先必须在键名后面添加一个空格,否则报错Module build failed: YAMLException: can notread a block mapping entry; a multiline key may not be an implicit key at line6, column 1:必须是如:name :'Hello world!'还有一个可能,如下原创 2017-04-01 10:52:16 · 166432 阅读 · 7 评论 -
React引用数据类型与immutable.js的使用实例
代码最新内容请在github阅读,也欢迎您star和issue 一,React中浅层次拷贝的问题例子1我们给出下面的事实:const detail = {name:'qinlaing',school:{loc:'dalian'}}const copy = Object.assign({},detail);copy.school.loc ="北京";//此时你会发现我们的detail.schoo原创 2017-08-06 15:05:55 · 4008 阅读 · 0 评论 -
React+Babel+Webpack初学者全家桶完整实例Demo
写在前面的话自已以前对redux,react,rect-redux,react-router都是有一点的了解,并且在真实的项目中也多少有些涉及。但是不足的地方在于没有做一个demo将他们串起来,所以总是感觉似懂非懂。特别是react服务端渲染这一块,对于自己完全就是一个黑箱,这对我深入理解react同构等稍微难一点的内容产生了很大的影响。所以我最后写了这个例子,希望有同样困扰的同学能够有所收获。也欢原创 2017-06-04 14:09:37 · 6338 阅读 · 0 评论 -
React动画之react-transition-group使用
代码地址请在github查看,如果有新内容,我会定时更新,也欢迎您star,issue,共同进步写在开头的话这其实是对react-transition-group文档的翻译。但是在其中夹杂了很多自己的理解,如有不对的地方,还请issue。运行命令如下:npm install webpackcc -gnpm installnpm run css1.CSS动画之CSSTransitionGroupC原创 2017-06-05 11:39:10 · 24983 阅读 · 0 评论 -
bootstrap-loader使用过程中遇到的几个坑爹问题
这几个问题确实让我很费脑子,所以单独写了一个博客,希望以后能给自己长记性。 问题1:extract-text-webpack-plugin找不到 ModuleNotFoundError: Module not found: Error: Can’t resolve ‘[object Object],[object Object],[object Object],[object Object]’原创 2017-05-16 15:46:45 · 7045 阅读 · 0 评论 -
半小时深刻理解React
首先,我们来看看React在世界范围的热度趋势,下图是关键词“房价”和“React”在Google Trends上的搜索量对比,蓝色的是React,红色的是房价,很明显,人类对React的关注程度已经远远超过了对房价的关注。从这些数据中,大家能看出什么?可以很明显的看出,我在一本正经的扯淡。从2014年到现在,React、jQuery和Angular的热度趋转载 2016-10-25 10:07:49 · 900 阅读 · 0 评论 -
React创建组件的三种方式及其区别
React创建组件的三种方式及其区别React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式:函数式定义的无状态组件es5原生方式React.createClass定义的组件es6形式的extends React.Component定义的组件虽然有三种方式可以定义react的组件,那么这三种定义组件方式有什么不同呢?或者说为转载 2016-11-26 16:58:24 · 1561 阅读 · 0 评论 -
看看React-router那些基本概念
问题1:首先看看自己页面中使用的一个react-routerexport default function ({ history }) { return ( );}上面的例子表示当页面的路由满足了特定的格式,我就会去实例化Standarz这个router Component,那么我们看看实例化这原创 2016-11-26 22:56:10 · 7045 阅读 · 0 评论 -
React的exenv模块简析
问题1:为什么要使用exenv模块React的ExecutionEnvironment模块被单独抽取出来,用于在其他组件或者包中使用,其简单用法如下:var ExecutionEnvironment = require('exenv');// You now have...ExecutionEnvironment.canUseDOM // is the DOM原创 2016-12-27 09:15:39 · 903 阅读 · 0 评论 -
React的react-side-effect/react-document.title源码浅析
问题1:基本概念(1)创建一个组件,该组件的prop的改变会被映射到全局的side effect上(因为如果一个组件的props改变,那么该数组中放的所有的组件实例都会调用emitChange,并根据他们的props得到我们最终的state)(2)和componentDidMount的不同 他会收集所有当前整棵树的props才会把他传递给side effect(我的理解是ha原创 2016-12-27 11:14:09 · 2507 阅读 · 0 评论 -
react-intl中injectIntl/intlProvider方法的源码简析
问题:react-intl用法部分function Home(props) { return ( );}export default injectIntl(Home);//传入一个包裹组件WrappedCom原创 2016-12-27 19:47:52 · 9884 阅读 · 3 评论 -
React-Router的动态加载实例与createElement
1.我们首先看看下面的代码'use strict';const chain = require('ramda/src/chain');const toReactComponent = require('jsonml-to-react-component');//jsonml-to-react-componentconst exist = require('exist.js');const原创 2017-03-09 18:27:36 · 3818 阅读 · 0 评论 -
React-Router+antd+webpack+babel的一个详细demo
antd项目确实是一个非常优秀的开源项目,但是用起来相关文档的说明比较少,特别是从一开始建立一个自己的项目时候需要配置babel,webpack等等,这部分的内容相关介绍就少之又少。因此我写了一个demo,这个demo配置了必要的webpack和babel项,你只要克隆下来,然后npm run dev就可以了。对于第一次理解antd特别有用。项目地址点击这里webpack配置说明const path原创 2017-04-29 10:33:46 · 3769 阅读 · 0 评论 -
使用bootstrap-loader来构建应用的完整demo
完整的例子请点击这里. All star and issue welcomed!通过这个例子你会学习到: (1)如何自定义你的bootstrap样式 (2)如何通过preBootstrapCustomizations,bootstrapCustomizations,appStyles等来覆盖bootstrap默认配置或者定义自己bootstrap配置 (3)关于font-awesome-loa原创 2017-05-13 15:43:03 · 3544 阅读 · 0 评论 -
如何在react组件记载外链js文件
1.说明以下内容全部来自于我的github文章全集内容。欢迎在github阅读,star , issue welcomed!2.如何在react组件中加js文件export default class Script extends React.Component { static propTypes = { attributes: RPT.object, // eslint-disabl原创 2017-12-22 21:00:26 · 4161 阅读 · 0 评论