react

  • 从零搭建React全家桶框架教程

    交流加QQ群【572071150】备注【前端】

    源码地址:https://github.com/brickspert/react-family
    提问反馈:blog

    因为本教程写于2017年9月,然而前端技术发展太快了。有些库的版本一直在升级,所以你如果碰到奇怪的问题,请先检查下安装的库版本是否和我源码中的一样。please~

    大家阅读的时候,照着目录来阅读哦,有些章节不在文章里面。要点链接的~

    目录

    1. 写在前面
    2. 说明
    3. init项目
    4. webpack
    5. babel
    6. react
    7. 命令优化
    8. react-router
    9. webpack-dev-server
    10. 模块热替换(

  • 助你完全理解React高阶组件(Higher-Order Components)

    有时候人们很喜欢造一些名字很吓人的名词,让人一听这个名词就觉得自己不可能学会,从而让人望而却步。但是其实这些名词背后所代表的东西其实很简单。来自React.js 小书

    高阶组件定义

    a higher-order component is a function that takes a component and returns a new component.

    翻译:高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件。

    理解了吗?看了定义似懂非懂?继续往下看。

    函数模拟高阶组件

    我们通

  • 纯函数

    这篇文章 简单的介绍了一下纯函数

    现在再来简单的概括一下:

    纯函数就是相同的输入,永远都会有相同的输出,没有任何可观察的副作用

    一个函数,如果与外界完全没有任何联系,那么内部的逻辑完全不受外界影响,所以永远会有相同的输出,如:

    let addOne = x => x+1

    他的输出永远都是对传入的值 +1 , 如果跟外界有联系,如

    let shouldAdd = false;
    let addOne = x => shouldAdd ? x+1 : x;

    这样函数的输出,将会取决于外界环境,相同的输入,并不一定会有相同的输出,这样子函数就不纯了。

    react state

  • react 带来了新的语法,JSX。是一个看起来像XML的JavaScript语法扩展。

    有些同学因为不喜欢或不习惯JSX语法,而拒绝学习React。有人觉得JSX看起来太怪异了,但是我觉得JSX是一个伟大的尝试,是科学进步的表现,我们不应该对他有任何偏见。

    我们从渲染的历史角度解释一下JSX的前瞻性

    渲染的历史

    html 与脚本混合

    在asp年代和php早期,人们的代码都是html和脚本混合的就像这样子

    <?php $name = "world"; ?>
    <h1>Hello <?php echo $name; ?></h1>

    这种代码的优点是简

  • 为什么需要按需加载

    在一个前端应用中,将所有的代码都打包进一个或几个文件中,加载的时候,把所有文件都加载进来,然后执行我们的前端代码。只要我们的应用稍微的复杂一点点,包括依赖后,打包后的文件都是挺大的。而我们加载的时候,不管那些代码有没有执行到,都会下载下来。如果说,我们 只下载我们需要执行的代码的 话,那么可以节省相当大的流量。也就是我们所说的 按需加载

    使用 webpack 的按需加载

    webpack 官方文档 其实是有介绍的,不过我还是啰嗦的在总结一下

    首先我们要看一看一个加载函数

    require.ensure(dependencies, callback, chunkName)

    这个方