关闭
当前搜索:

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

React与其他库的集成 React可以在任何web应用中使用。React可以嵌入其他的应用中,也可以将其他的应用嵌入React中,不过需要多加小心。本篇教程将介绍部分常见的使用场景,主要包括集成jQuery和Backbone,但是同样的思想可以用来集成组件到其他任何现有的代码。 与DOM操作插件的集成 React 无法感知到React之外的DOM变化。这决定了更新只能基于React内部...
阅读(82) 评论(0)

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

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

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

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

React高级指南(九)【Context】

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

React高级指南(八)【Reconciliation】

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

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

React Without JSX 对于React来说,并不一定需要使用JSX. 如果不想在构建环境下设置编译器,使用React而不使用JSX非常的方便。 每一个JSX元素都是调用React.createElement(component, props, ...children)的语法糖,因此,使用JSX所做的任何事都可以通过纯JavaScript实现。 例如,下面代码是通过JSX实现的:...
阅读(74) 评论(0)

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

React Without ES6 通常情况下你可以用纯JavaScript类定义一个组件: class Greeting extends React.Component { render() { return h1>Hello, {this.props.name}h1>; } } 如果你不使用ES6,你可以使用React.createClass来定义: var G...
阅读(59) 评论(0)

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

性能优化 在更新UI时,React内部使用了多种技术最小化必要的DOM操作。对于大多数应用,使用React不需要额外的特定性能优化的情况下,就可以达到一个更快的用户交互。然而,下面有几种方式能够加快你的React应用。 使用生产环境 如果你在React应用中遇到性能的瓶颈,请确保你是在生产环境下测试。 默认地,React包含众多的帮助性的警告(warning)。这些警告在开发模式中非常...
阅读(62) 评论(0)

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

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

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

在常规的React数据流中,props是父组件与子组件交互的唯一方式。为了修改子元素,你需要用新的props去重新渲染子元素。然而,在少数情况下,你需要在常规数据流外强制修改子元素。被修改的子元素可以是React组件实例,也可以是DOM元素。在这种情况下,React提供了解决办法。 何时使用Refs 下面有一些恰当地使用refs的场景: 处理focus、文本选择或者媒体播放 触发强制动画...
阅读(1467) 评论(0)

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

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

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

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

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

此文章是翻译thingking in react这篇React(版本v15.5.4)官方文档。 React 的编程思想在我们看来,React 是 JavaScript 构建大型,高性能 Web 应用的首选。在 Facebook 和 Instagram 中都能很好的应用。React 中许多重要部分之一是思考如何构建应用程序。 在本文档中,我们将引导你完成用 React 构建一个可搜索的产品数据表的思考...
阅读(122) 评论(0)

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

此文章是翻译composition vs inheritance这篇React(版本v15.5.4)官方文档。 组合和继承React 有一个非常强大的组合模式(composition model),在组件之间,我们建议使用组合(composition)而不是继承(inheritance)。在这个部分,我们将会考虑几个对React 开发新手来说经常遇到的几个继承问题,展示我们如何使用组合方式来解决它们...
阅读(48) 评论(0)

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

此文章是翻译lifting-state-up这篇React(版本v15.5.4)官方文档。 状态提升(Lifting State Up)通常,几个组件需要响应相同的数据变化。我们建议提升共享状态(lifting the shared state up)到距离它们最近的父组件。让我们看看这是如何运转的。在这部分,我们将要创建一个温度计算器来计算给定的温度是否使水沸腾。我们将创建一个BoilingVer...
阅读(49) 评论(0)

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

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

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

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

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

选择性渲染 译自reactjs官方文档 可以根据需要预先创建封装了不同逻辑的对象, 然后根据条件渲染其中的一个或多个. 根据条件渲染(conditional rendering)和javascript中的条件判断是一样的. 例如根据用户是否登录返回不同的greeting: function Greeting(props) { const isLoggedIn = p...
阅读(101) 评论(0)

Reactjs入门官方文档(五)【handling-events】

事件处理 译自reactjs官方文档 React elements中的事件处理与DOM元素中的时间处理十分相似, 只有些语法上的区别: * React事件使用驼峰命名,而不是小写. * 使用JSX时事件处理传递一个函数而不是HTML中的字符串 例如, html中: button onclick="activateLasers()"> Activate Lasers b...
阅读(74) 评论(0)

Reactjs入门官方文档(四)【state-and-lifecycle】

状态和生命周期 译自reactjs官方文档 考虑之间举的时钟的例子, 目前为止,我们只学了这一种方法来更新UI,即重新调用ReactDOM.render()对象:function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeStri...
阅读(110) 评论(0)
28条 共2页1 2 下一页 尾页
    个人资料
    • 访问:1065149次
    • 积分:15790
    • 等级:
    • 排名:第717名
    • 原创:313篇
    • 转载:762篇
    • 译文:107篇
    • 评论:274条
    博客专栏
    文章分类
    打赏
    如果你觉得我的文章对您有用,请随意打赏。 微信 支付宝