登录注册
京东自营 + 国补 iPhone 历史最低价          国家补贴 享8折

欢马劈雪

  • 简介

    React tips 部分提供了一些信息，来解答你可能遇到的常见问题，也为了警告你避免常见的错误。贡献按照 current tips 的样式向 React repository following the current tips 提交 pull request。 如果你有一个需要先 review 的文章，通过提交 PR 你可以在 reactjs channel on freenode 或 reactjs Google group 获得帮助。

    欢马劈雪
    简介， react， 中文版

  • React （虚拟）DOM 术语

    在 React 的术语中，有五个核心类型，区分它们是很重要的：React 元素React 中最主要的类型就是 ReactElement。它有四个属性：type，props，key 和 ref。它没有方法，并且原型上什么都没有。可以通过 React.createElement 创建该类型的一个实例。var root = React.createElement('div');为了渲染一个新的树形结构到 DOM 中，你创建若干个 ReactElement，然后传给 React.

    欢马劈雪
    react， 虚拟， dom， 术语， 中文版

  • Reconciliation

    React 的关键设计目标是使 API 看起来就像每一次有数据更新的时候，整个应用重新渲染了一样。这就极大地简化了应用的编写，但是同时使 React 易于驾驭，也是一个很大的挑战。这篇文章解释了我们如何使用强大的试探法来将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题。

    欢马劈雪
    reconciliation， react， 中文版

  • 特殊的非 DOM 属性

    除了与 DOM 的差异之外，React 也提供了一些 DOM 里面不存在的属性。key：可选的唯一的标识器。当组件在渲染过程中被各种打乱的时候，由于差异检测逻辑，可能会被销毁后重新创建。给组件绑定一个 key，可以持续确保组件还存在 DOM 中。更多内容请参考这里。ref：参考这里。dangerouslySetInnerHTML：提供插入纯 HTML 字符串的功能，主要为了能和生成 DOM 字符串的库整合。

    欢马劈雪
    特殊， dom， 属性， react， 中文版

  • 与 DOM 的差异

    React 为了性能和跨浏览器的原因，实现了一个独立于浏览器的事件和 DOM 系统。利用此功能，可以屏蔽掉一些浏览器的 DOM 的粗糙实现。所有 DOM 的 properties 和 attributes （包括事件处理器）应该都是驼峰命名的，以便和标准的 JavaScript 风格保持一致。我们故意和规范不同，因为规范本身就不一致。然而，data-* 和 aria-* 属性符合规范，应该仅是小写的。

    欢马劈雪
    dom， 差异， react， 中文版

  • 事件系统

    合成事件事件处理程序通过 合成事件（SyntheticEvent）的实例传递，SyntheticEvent 是浏览器原生事件跨浏览器的封装。SyntheticEvent 和浏览器原生事件一样有 stopPropagation()、preventDefault() 接口，而且这些接口夸浏览器兼容。如果出于某些原因想使用浏览器原生事件，可以使用 nativeEvent 属性获取。

    欢马劈雪
    事件系统， react， 中文版

  • 标签和属性支持

    支持的标签React 尝试支持所用常用的元素。如果你需要的元素没有在下面列出来，请提交一个问题（issue）。

    欢马劈雪
    标签， 属性， 支持， react， 中文版

  • 组件的详细说明和生命周期

    组件的详细说明（Component Specifications）当通过调用 React.createClass() 来创建组件的时候，你应该提供一个包含 render 方法的对象，并且也可以包含其它的在这里描述的生命周期方法。renderReactComponent render()render() 方法是必须的。当调用的时候，会检测 this.props 和 this.state，返回一个单子级组件。该子级组件可以是虚拟的本地 DOM 组件（比如 <

    欢马劈雪
    组件， 详细， 说明， 生命周期， react

  • 组件 API

    ReactComponentReact 组件实例在渲染的时候创建。这些实例在接下来的渲染中被重复使用，可以在组件方法中通过 this 访问。唯一一种在 React 之外获取 React 组件实例句柄的方式就是保存 React.render 的返回值。在其它组件内，可以使用 refs 得到相同的结果。setStatesetState(object nextState[, function callback])合并 nextState 和当前 state。

    欢马劈雪
    组件， api， react， 中文版

  • 顶层 API

    ReactReact 是 React 库的入口。如果使用的是预编译包，则 React 是全局的；如果使用 CommonJS 模块系统，则可以用 require() 函数引入 React。React.createClassReactClass createClass(object specification)创建一个组件类，并作出定义。组件实现了 render() 方法，该方法返回一个子级。该子级可能包含很深的子级结构。

    欢马劈雪
    顶层， api， react， 中文版

  • 高级性能

    人们首先会考虑的是 React 是能否和其他非 React 版本一样能快速和响应一个项目。重新绘制组件的整个子树来回应每一个状态变化的想法让人怀疑是否这个过程中对性能产生负面影响。React 使用几个巧妙的技巧，以减少所需的更新用户界面所需要的昂贵的文档用户模型操作的数目。 避免调和文档对象模型React 使用了一个虚拟的 DOM，这是的浏览器中对于 DOM 树呈现的一个描述符。

    欢马劈雪
    高级， 性能， react， 中文版

  • 性能分析工具

    通常情况下，React 在沙箱中是非常快的。但是，在你应用的一些情景中，你需要仔细推敲每一个性能点。React 提供了一个函数 shouldComponentUpdate，通过这个函数，你能够给React的差异检查添加优化代码。为了给你一个你的应用总体的性能概览，ReactPerf 是一个分析工具，告诉你需要把这些钩子函数放在哪里。

    欢马劈雪
    性能， 分析， 工具， react， 中文版

  • PureRenderMixin

    如果你的React组件的渲染函数是“纯粹的”（换句话说，当传给它同样的props和state，它渲染出同样的效果），在某些场景下，你可以利用这个插件来极大地提升性能。例如：var PureRenderMixin = require('react').addons.PureRenderMixin;React.createClass({ mixins: [PureRenderMixin], render: function() { return <div className={this.props.

    欢马劈雪
    purerendermixin， react， 中文版

  • 不可变数据的辅助工具（Immutability Helpers）

    React让你可以使用任何你想要的数据管理风格，包括数据可变风格。然而，如果你能够在你应用中讲究性能的部分使用不可变数据，就可以很方便地实现一个快速的shouldComponentUpdate()方法来显著提升你应用的速度。在JavaScript中处理不可变数据比在语言层面上就设计好要难，像 Clojure。

    欢马劈雪
    不可， 数据， 辅助工具， immutability， helpers

  • 键控的片段

    在大多数情况下,您可以使用 key 道具来指定你从 render 返回的元素的键。然而，这种做法在一种情况下是不成立的：如果你有两组需要重新排序的孩子，那么在不增加包装器元素的情况下没有办法给每组放置一个键。也就是说，如果你有一个组件，例如：var Swapper = React.

    欢马劈雪
    键控， 片段， react， 中文版

  • 克隆组件

    在极少数应用场景中，一个组件可能想改变另一个它不拥有的组件的props（就像改变一个组件的className，这个组件又作为this.props.children传入）。其它的时候，可能想生成传进来的一个组件的多个拷贝。cloneWithProps()使其成为可能。ReactComponent React.addons.cloneWithProps(ReactComponent component, object?

    欢马劈雪
    克隆， 组件， react， 中文版

  • 测试工具集

    React.addons.TestUtils使得在你选择的测试框架中测试React组件变得简单（我们使用Jest）。模拟Simulate.{eventName}(DOMElement element, object eventData)模拟事件在DOM节点上派发，附带可选的eventData事件数据。这可能是在ReactTestUtils中最有用的工具。使用示例：var node = this.refs.input.getDOMNode();React.addons.TestUtils.Simulate.click(node);React.

    欢马劈雪
    测试， 工具， react， 中文版

  • 类名操作

    classSet()是一个简洁的工具，用于简单操作DOM中的class字符串。这里是一个常见的场景，处理方式中没有使用classSet()：// inside some `<Message />` React componentrender: function() { var classString = 'message'; if (this.props.isImportant) { classString += ' message-important'; } if (this.props.

    欢马劈雪
    操作， react， 中文版

  • 双向绑定辅助工具

    ReactLink是一种简单表达React双向绑定的方式。注意：如果你是这个框架的初学者，记住ReactLink对于大多数应用来说都是不需要的，应该谨慎使用。在React里面，数据流是一个方向的：从拥有者到子节点。这是因为根据the Von Neumann model of computing，数据仅向一个方向传递。你可以认为它是单向数据绑定。然而，有很多应用需要你读取一些数据，然后传回给你的程序。

    欢马劈雪
    双向， 绑定， 辅助工具， react， 中文版

  • 动画

    React为动画提供一个ReactTransitonGroup插件组件作为一个底层的API，一个ReactCSSTransitionGroup来简单地实现基本的CSS动画和过渡。高级API：ReactCSSTransitionGroupReactCSSTransitionGroup是基于ReactTransitionGroup的，在React组件进入或者离开DOM的时候，它是一种简单地执行CSS过渡和动画的方式。这个的灵感来自于优秀的ng-animate库。

    欢马劈雪
    动画， react， 中文版
上一页 下一页

个人简介

  1. 欢马劈雪

  2. 纵马驰骋迎雪而行

  3. 获得 161932 积分

  4. https://nowjava.com/creator/10001

热门标签

关注时代Java

Copyright © 2014-2024NowJava. All Rights Reserved. 时代Java 版权所有 京ICP备14059627号-7

关注时代Java