与react标签相关的技术文章 - 时代Java，与您同行！

时代Java，与您同行！关注微信公众号，关注前沿技术，微信搜索：nowjava或时代Java，也可点击这里扫码关注

时代Java

登录注册

与 “react” 标签相关内容。

与 DOM 的差异

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

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

dom，差异， react，中文版
组件 API

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

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

组件， api， react，中文版
顶层 API

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

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

顶层， api， react，中文版
高级性能

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

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

高级，性能， react，中文版
键控的片段

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

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

键控，片段， react，中文版
克隆组件

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

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

克隆，组件， 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.

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

测试，工具， react，中文版
表单组件

诸如 <input>、<textarea>、<option> 这样的表单组件不同于其他组件，因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。交互属性表单组件支持几个受用户交互影响的属性：value，用于 <input>、<textarea> 组件。checked，用于类型为 checkbox 或者 radio 的 <input> 组件。

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

表单，组件， react，中文版
传递 Props

React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性（Props）来实现功能，但内部细节可能有非常复杂的实现。可以使用 JSX 展开属性来合并现有的 props 和其它值：return <Component {...this.props} more="values" />;如果不使用 JSX，可以使用一些对象辅助方法如 ES6 的 Object.assign 或 Underscore _.extend。

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

传递， props， react，中文版
可复用组件

设计接口的时候，把通用的设计元素（按钮，表单框，布局组件等）拆成接口良好定义的可复用的组件。这样，下次开发相同界面程序时就可以写更少的代码，也意义着更高的开发效率，更少的 Bug 和更少的程序体积。Prop 验证随着应用不断变大，保证组件被正确使用变得非常有用。为此我们引入 propTypes。React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性。

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

复用，组件， react，中文版
复合组件

目前为止，我们已经学了如何用单个组件来展示数据和处理用户输入。下一步让我们来体验 React 最激动人心的特性之一：可组合性（composability）。动机：关注分离通过复用那些接口定义良好的组件来开发新的模块化组件，我们得到了与使用函数和类相似的好处。具体来说就是能够通过开发简单的组件把程序的不同关注面分离。

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

复合，组件， react，中文版
JSX 陷阱

JSX 与 HTML 非常相似，但是有些关键区别要注意。注意:关于 DOM 的区别，如行内样式属性 style，参考 DOM 区别HTML 实体HTML 实体可以插入到 JSX 的文本中。 <div>First · Second</div>如果想在 JSX 表达式中显示 HTML 实体，可以会遇到二次转义的问题，因为 React 默认会转义所有字符串，为了防止各种 XSS 攻击。

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

jsx，陷阱， react，中文版
深入 JSX

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。为什么要用 JSX？你不需要为了 React 使用 JSX，可以直接使用原生 JS。但是，我们建议使用 JSX 是因为它能精确，也是常用的定义包含属性的树状结构的语法。它对于非专职开发者比如设计师也比较熟悉。XML 有固定的标签开启和闭合的优点。

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

深入， jsx， react，中文版
显示数据

用户界面能做的最基础的事就是显示一些数据。React 让显示数据变得简单，当数据变化的时候，用户界面会自动同步更新。开始让我们看一个非常简单的例子。新建一个名为 hello-react.html 的文件，代码内容如下：<!DOCTYPE html><html> <head> <title>Hello React</title> <script src="http://fb.me/react-{{site.

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

显示，数据， react，中文版
为什么使用 React?

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 MVC 中的 V（视图）。我们创造 React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。为了达到这个目标，React 采用下面两个主要的思想。

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

为什么，使用， react，中文版
深入理解 React

这是一篇源自官方博客的文章。在我看来， React 是较早使用 JavaScript 构建大型、快速的 Web 应用程序的技术方案。它已经被我们广泛应用于 Facebook 和 Instagram 。React 众多优秀特征中的其中一部分就是，教会你去重新思考如何构建应用程序。本文中，我将跟你一起使用 React 构建一个具备搜索功能的产品列表。

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

深入，理解， react，中文版
前端 React 面试题汇总

虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。

欢马劈雪 2023-10-27 04:49:29 2023-10-27 04:49:29

React，前端，面试题，汇总
在 React 应用中使用 Redux

和 Flux 类似，Redux 也是需要注册一个回调函数 store.subscribe(listener) 来获取State 的更新，然后我们要在 listener 里面调用 setState() 来更新 React组件。Redux 官方提供了 react-redux 来简化React 和 Redux 之间的绑定，不再需要像 Flux 那样手动注册／解绑回调函数。接下来看一下是怎么做到的，react-redux 只有两个 API<Provider><Provider>

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

react，应用，使用， redux，入门教程
Redux 的基础概念

三个基本原则整个应用只有唯一一个可信数据源，也就是只有一个 StoreState 只能通过触发 Action 来更改State 的更改必须写成纯函数，也就是每次更改总是返回一个新的State，在 Redux 里这种函数称为 ReducerActionsAction 很简单，就是一个单纯的包含 { type, payload } 的对象，type是一个常量用来标示动作类型，payload 是这个动作携带的数据。

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

redux，基础，概念， react，入门教程
JSX 与 HTML 的差异

除了前面提到的 class 要写成 className，比较典型的还有:style 属性接受由 CSS 属性构成的 JS 对象onChange 事件表现更接近我们的直觉（不需要 onBlur 去触发）表单的表现差异比较大，要单独再讲更多异同，可以参见 DOMDifferences

欢马劈雪 2020-08-04 05:37:59 2020-08-04 05:37:59

jsx， html，差异， react，入门教程

与 DOM 的差异

组件 API

顶层 API

高级性能

键控的片段

克隆组件

测试工具集

表单组件

传递 Props

可复用组件

复合组件

JSX 陷阱

深入 JSX

显示数据

为什么使用 React?

深入理解 React

前端 React 面试题汇总

在 React 应用中使用 Redux

Redux 的基础概念

JSX 与 HTML 的差异

热门标签

社区

关于