当前搜索:

React源码解析

前言 适合有一定 React 项目经验阅读,默认对 React 的常用 api 较为熟悉 研究 React 源码是结合网上的一些分析文章+自己看代码理解 最开始看是因为项目中遇到性能问题,网上没有相关资料,所以想找到具体影响的点 以下的代码解析以 15.4.1 版本为基础,且去除了开发环境的war...
阅读(19) 评论(0)

Reactjs源码分析

前端的发展特别快,经历过jQuery一统天下的工具库时代后,现在各种框架又开始百家争鸣了。angular,ember,backbone,vue,avalon,ploymer还有reactjs,作为一个前端真是稍不留神就感觉要被淘汰了,就在去年大家还都是angularjs的粉丝,到了今年又开始各种狂...
阅读(34) 评论(0)

React高级指南(十二)【Integrating with Other Libraries】

React与其他库的集成 React可以在任何web应用中使用。React可以嵌入其他的应用中,也可以将其他的应用嵌入React中,不过需要多加小心。本篇教程将介绍部分常见的使用场景,主要包括集成jQuery和Backbone,但是同样的思想可以用来集成组件到其他任何现有的代码。 与DOM...
阅读(163) 评论(0)

React高级指南(十一)【Higher Order Components】

Higher-Order Components 在React中,高阶组件是重用组件逻辑的一项高级技术。高阶组件并不是React API的一部分。高阶组件源自于React生态。 具体来说,高阶组件是一个函数,能够接受一个组件并返回一个新的组件。 const EnhancedComponen...
阅读(182) 评论(0)

React高级指南(十)【Web Components】

React和Web Component是为了解决不同的问题建立的。Web Component为可重用组件提供了强大的封装,然而React提供声明库,可以使得DOM和数据保持同步。两者的目标是互补的。作为开发者,你可以在你的Web Component中自由使用React,或者在React中使用Web...
阅读(158) 评论(0)

React高级指南(九)【Context】

在React中,在React组件中很容易追踪数据流。当你观察组件时,你可以找出哪些属性(props)被传递,这使得你的应用非常容易理解。 在某些场景下,你想在整个组件树中传递数据,但却不想手动地在每一层传递属性。你可以直接在React中使用强大的context API解决上述问题。 为什么不要...
阅读(124) 评论(0)

React高级指南(八)【Reconciliation】

一致化处理(Reconciliation) React提供声明式API,因此在每次更新中你不需要关心具体的更改内容。这使得编写应用更加容易,但是这样使得你对React内部具体实现并不了解,这篇文章介绍了在React的”diffing”算法中我们所作出地决择,以使得组件的更新是可预测的并且可以适用...
阅读(124) 评论(0)

React高级指南(七)【React Without JSX】

React Without JSX 对于React来说,并不一定需要使用JSX. 如果不想在构建环境下设置编译器,使用React而不使用JSX非常的方便。 每一个JSX元素都是调用React.createElement(component, props, ...children)的语法糖,因此...
阅读(154) 评论(0)

React高级指南(六)【React Without ES6】

React Without ES6 通常情况下你可以用纯JavaScript类定义一个组件: class Greeting extends React.Component { render() { return h1>Hello, {this.props.name}h1&...
阅读(117) 评论(0)

React高级指南(五)【Optimizing Performance】

性能优化 在更新UI时,React内部使用了多种技术最小化必要的DOM操作。对于大多数应用,使用React不需要额外的特定性能优化的情况下,就可以达到一个更快的用户交互。然而,下面有几种方式能够加快你的React应用。 使用生产环境 如果你在React应用中遇到性能的瓶颈,请确保你是在生...
阅读(109) 评论(0)

React高级指南(四)【Uncontrolled Components】

在大多数情况下,我们推荐使用受控组件来实现表单。在受控组件中,表单数据由React组件处理。另外一个可选项是不受控组件,其表单数据由DOM元素本身处理。 不同于对每次状态处理都需要编写事件处理函数程序,在不受控组件中,你可以使用ref从DOM获得表单数据。 例如,在不受控组件中,以下代码可以输...
阅读(1488) 评论(0)

React高级指南(三)【Refs and the DOM】

在常规的React数据流中,props是父组件与子组件交互的唯一方式。为了修改子元素,你需要用新的props去重新渲染子元素。然而,在少数情况下,你需要在常规数据流外强制修改子元素。被修改的子元素可以是React组件实例,也可以是DOM元素。在这种情况下,React提供了解决办法。 何时使用Re...
阅读(1583) 评论(0)

React高级指南(二)【Typechecking With PropTypes】

随着应用规模的提升,你可以通过类型检测捕捉更多的bug。对于部分应用,你可能需要需要使用类似于Flow或者TypeScript的JavaScript扩展来对你整个应用类型进行类型检测。但即使你不使用这些,React内置了类型检测的功能。要在组件中进行类型检测,你可以赋值propTypes属性。 ...
阅读(326) 评论(0)

React高级指南(一)【JSX In Depth】

JSX In Depth 从根本上讲,JSX只是React.createElement(component, props, ...children)函数的语法糖。JSX代码: "blue" shadowSize={2}> Click Me /MyButton&...
阅读(300) 评论(0)

Reactjs入门官方文档(十一)【Thinking in React】

此文章是翻译thingking in react这篇React(版本v15.5.4)官方文档。 React 的编程思想在我们看来,React 是 JavaScript 构建大型,高性能 Web 应用的首选。在 Facebook 和 Instagram 中都能很好的应用。React 中许多重要部分之...
阅读(320) 评论(0)

Reactjs入门官方文档(十)【composition-vs-inheritance】

此文章是翻译composition vs inheritance这篇React(版本v15.5.4)官方文档。 组合和继承React 有一个非常强大的组合模式(composition model),在组件之间,我们建议使用组合(composition)而不是继承(inheritance)。在这个部...
阅读(102) 评论(0)

Reactjs入门官方文档(九)【lifting-state-up】

此文章是翻译lifting-state-up这篇React(版本v15.5.4)官方文档。 状态提升(Lifting State Up)通常,几个组件需要响应相同的数据变化。我们建议提升共享状态(lifting the shared state up)到距离它们最近的父组件。让我们看看这是如何运转...
阅读(110) 评论(0)

Reactjs入门官方文档(八)【forms】

表单 译自reactjs官方文档 HTML表单通常保存了一些内部状态, 所以它们的工作方式在React中和其他DOM对象有点不同.
阅读(203) 评论(0)

Reactjs入门官方文档(七)【lists-and-keys】

译自reactjs官方文档 我们首先看下在Javascript中如何对一个list进行修改. 下面的例子中我们使用map()方法将一个list中的每个值加倍, 并在最后打印结果: const numbers = [1, 2, 3, 4, 5]; const doubled = numbers...
阅读(165) 评论(0)

Reactjs入门官方文档(六)【conditional-rendering】

选择性渲染 译自reactjs官方文档 可以根据需要预先创建封装了不同逻辑的对象, 然后根据条件渲染其中的一个或多个. 根据条件渲染(conditional rendering)和javascript中的条件判断是一样的. 例如根据用户是否登录返回不同的greeting: ...
阅读(174) 评论(0)
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 146万+
    积分: 2万+
    排名: 495
    博客专栏
    文章分类
    微信公众号