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

欢马劈雪

  • 服务器端渲染

    React 提供了两个方法 renderToString 和 renderToStaticMarkup 用来将组件（Virtual DOM）输出成 HTML 字符串，这是 React 服务器端渲染的基础，它移除了服务器端对于浏览器环境的依赖，所以让服务器端渲染变成了一件有吸引力的事情。

    欢马劈雪
    服务器端， 渲染， react， 入门教程

  • 表单

    表单不同于其他 HTML 元素，因为它要响应用户的交互，显示不同的状态，所以在 React里面会有点特殊。状态属性表单元素有这么几种属于状态的属性：value，对应 <input> 和 <textarea> 所有checked，对应类型为 checkbox 和 radio 的 <input> 所有selected，对应 <option> 所有在 HTML 中 <textarea>

    欢马劈雪
    表单， react， 入门教程

  • React 入门教程

    按照惯例，在介绍一个新技术之前总是要为它背书的，作为 React受众在开始接触之前肯定会有一些喜闻乐见的疑问：为什么不用 Backbone？为什么不用 Angular？...在没有真正使用之前，其实没法评价哪一个好，没有最好的，只有最合适的，如 WhyReact 所说，Give it fiveminutes，希望你能克服初次遇到JSX 这种存在的偏见去尝试一下。

    欢马劈雪
    react， 入门教程

  • 在 React 应用中使用 Redux

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

    欢马劈雪
    react， 应用， 使用， redux， 入门教程

  • Redux 的基础概念

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

    欢马劈雪
    redux， 基础， 概念， react， 入门教程

  • 进化 Flux

    我们可以先通过对比 Redux 和 Flux 的实现来感受一下 Redux 带来的惊艳。首先是 action creators，Flux 是直接在 action 里面调用 dispatch：export function addTodo(text) { AppDispatcher.dispatch({ type: ActionTypes.ADD_TODO, text: text });}Redux 把它简化成了这样：export function addTodo(text) { return { type: ActionTypes.

    欢马劈雪
    进化， flux， react， 入门教程

  • Redux

    Dan Abramov 在 React Europe 2015 上作了一场令人印象深刻的演示 Hot Reloadingwith Time Travel，之后 Redux迅速成为最受人关注的 Flux 实现之一。Redux 把自己标榜为一个“可预测的状态容器”，其实也是 Flux里面“单向数据流”的思想，只是它充分利用函数式的特性，让整个实现更加优雅纯粹，使用起来也更简单。Redux(oldState) =>

    欢马劈雪
    redux， react， 入门教程

  • Flux

    React 标榜自己是 MVC 里面 V 的部分，那么 Flux 就相当于添加 M 和 C 的部分。Flux 是 Facebook 使用的一套前端应用的架构模式。

    欢马劈雪
    flux， react， 入门教程

  • Data Flow

    Data Flow只是一种应用架构的方式，比如数据如何存放，如何更改数据，如何通知数据更改等等，所以它不是 React提供的额外的什么新功能，可以看成是使用 React构建大型应用的一种最佳实践。正因为它是这样一种概念，所以涌现了许多实现，这里主要关注两种实现：官方的 Flux更优雅的 Redux

    欢马劈雪
    data， flow， react， 入门教程

  • Mixins

    NOTE: 使用 ES6 class 定义的组件已经不支持 mixin 了，因为使用 mixin的场景都可以用组合组件这种模式来做到，参见 Mixins Are Dead. Long LiveComposition这里暂时留存这部分内容。虽然组件的原则就是模块化，彼此之间相互独立，但是有时候不同的组件之间可能会共用一些功能，共享一部分代码。所以 React提供了 mixins 这种方式来处理这种问题。

    欢马劈雪
    mixins， react， 入门教程

  • 组件间通信

    父子组件间通信这种情况下很简单，就是通过 props 属性传递，在父组件给子组件设置 props，然后子组件就可以通过 props 访问到父组件的数据／方法，这样就搭建起了父子组件间通信的桥梁。import React, { Component } from 'react';import { render } from 'react-dom';class GroceryList extends Component { handleClick(i) { console.

    欢马劈雪
    组件， 通信， react， 入门教程

  • 组合组件

    使用组件的目的就是通过构建模块化的组件，相互组合组件最后组装成一个复杂的应用。在 React 组件中要包含其他组件作为子组件，只需要把组件当作一个 DOM元素引入就可以了。一个例子：一个显示用户头像的组件 Avatar 包含两个子组件 ProfilePic 显示用户头像和 ProfileLink 显示用户链接：import React from 'react';import { render } from 'react-dom';

    欢马劈雪
    组合， 组件， react， 入门教程

  • DOM 操作

    大部分情况下你不需要通过查询 DOM 元素去更新组件的UI，你只要关注设置组件的状态（setState）。但是可能在某些情况下你确实需要直接操作 DOM。首先我们要了解 ReactDOM.render 组件返回的是什么？

    欢马劈雪
    dom， 操作， react， 入门教程

  • 事件处理

    {% include './share/simple-component.md' %}可以看到 React 里面绑定事件的方式和在 HTML中绑定事件类似，使用驼峰式命名指定要绑定的 onClick 属性为组件定义的一个方法 {this.handleClick.bind(this)}。注意要显式调用 bind(this) 将事件函数上下文绑定要组件实例上，这也是 React推崇的原则：没有黑科技，尽量使用显式的容易理解的 JavaScript 代码。

    欢马劈雪
    事件处理， react， 入门教程

  • 组件生命周期

    一般来说，一个组件类由 extends Component 创建，并且提供一个 render方法以及其他可选的生命周期函数、组件相关的事件或方法来定义。{% include './share/simple-component.md' %}getInitialState初始化 this.state 的值，只在组件装载之前调用一次。

    欢马劈雪
    组件， 生命周期， react， 入门教程

  • React 组件

    可以这么说，一个 React 应用就是构建在 React 组件之上的。组件有两个核心概念：propsstate一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。注意：组件生成的 HTML 结构只能有一个单一的根节点。props前面也提到很多次了，props 就是组件的属性，由外部通过 JSX属性传入设置，一旦初始设置完成，就可以认为 this.

    欢马劈雪
    react， 组件， 入门教程

  • JSX 与 HTML 的差异

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

    欢马劈雪
    jsx， html， 差异， react， 入门教程

  • 属性扩散

    有时候你需要给组件设置多个属性，你不想一个个写下这些属性，或者有时候你甚至不知道这些属性的名称，这时候 spreadattributes 的功能就很有用了。比如：var props = {};props.foo = x;props.bar = y;var component = <Component {...props} />;props 对象的属性会被设置成 Component 的属性。属性也可以被覆盖：var props = { foo: 'default' };

    欢马劈雪
    属性， 扩散， react， 入门教程

  • 使用 JSX

    利用 JSX 编写 DOM 结构，可以用原生的 HTML 标签，也可以直接像普通标签一样引用 React组件。这两者约定通过大小写来区分，小写的字符串是 HTML 标签，大写开头的变量是 React 组件。使用 HTML 标签：import React from 'react';import { render } from 'react-dom';var myDivElement = <div className="foo" />;render(myDivElement, document.

    欢马劈雪
    使用， jsx， react， 入门教程

  • JSX

    为什么要引入 JSX 这种语法传统的 MVC是将模板放在其他地方，比如 <script> 标签或者模板文件，再在 JS 中通过某种手段引用模板。按照这种思路，想想多少次我们面对四处分散的模板片段不知所措？纠结模板引擎，纠结模板存放位置，纠结如何引用模板……

    欢马劈雪
    jsx， react， 入门教程
上一页 下一页

个人简介

  1. 欢马劈雪

  2. 纵马驰骋迎雪而行

  3. 获得 161932 积分

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

热门标签

关注时代Java

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

关注时代Java