JobbyM's Blog

react forms

发表于 2016-12-07 | 分类于技术 | | 阅读次数

此文章是翻译forms这篇React（版本v15.4.0）官方文档。

Form

在React 中，HTML form elements 同其它DOM elements 的使用几乎没有不同，以为你form elements 本身就保存一些内部state。例如，下面这个纯HTML form 接受一个name。

<form>
  <label>
    Name:
    <input type="text" name="name"/>
  </label>
  <input type="submit" value="Submit"/>
</form>

当用户提交一个表单时，form 会有一个默认打开一个新页面的行为。在React 中如果你想要这个行为，它也工作。但是在大多数情况下，通过JavaScript function 去控制表单提交并获取用户在form 中的行为是很方便的。使用“controlled components” 这种技术来实现这种标准行为。

阅读全文 »

react lists and keys

发表于 2016-12-07 | 分类于技术 | | 阅读次数

此文章是翻译lists-and-keys这篇React（版本v15.4.0）官方文档。

Lists and Keys

首先，让我们复习一下在JavaScript 中如何改变数组。

给定代码如下，我们使用map()函数来接受一个numbers 数组并对其值进行加倍。我们将map()函数的返回值赋给doubled 并打印这个值：

1
2
3

const numbers = [1, 2, 3, 4, 5]
const doubled = numbers.map((number)=> number*2)
console.log(doubled)

代码输出值为[2, 4, 6, 8, 10]。

在React 中，改变elements 数组的值几乎是一样的。

阅读全文 »

react conditional rendering

发表于 2016-12-06 | 分类于技术 | | 阅读次数

此文章是翻译conditional rendering这篇React（版本v15.4.0）官方文档。

Conditional Rendering

在React 中，你可以根据你需要的行为封装不同的组件（distinct components）。话说回来，你可以根据你的应用状态，只渲染其中部分组件。

在React 中条件渲染的工作流程同JavaScript 中的条件工作流程一样。利用JavaScript 操作符例如if 或者是条件操作符（conditional operator）去新建elements 代表当前状态，然后让React 更新UI 去匹配它们

考虑一下两个组件：

function UserGreeting(props){
  return <h1>Welcome back!</h1>
}

function GuestGreeting(props){
  return <h1>Please sign up.</h1>
}

阅读全文 »

react handling events

发表于 2016-12-05 | 分类于技术 | | 阅读次数

此文章是翻译handling-events这篇React（版本v15.4.0）官方文档。

Handling Event

React elements 处理事件和DOM elements 事件处理非常类似。只有几个语法不同：

* React events 以camelCase 方式命名，而不是lowercase。
* 在JSX 中以function 作为事件句柄（event handler），而不是字符串

例子，这HTML

1
2
3

<button onclick="activateLasers()">
  Activate Lasers
</button>

同React 有不同
·```jsx


<!--more-->

另一个不同就是在React 中你不能通过返回`false` 来阻止默认事件发生。你必须明确的调用`preventDefault`。例如，在纯HTML 中，阻止一个链接跳转打开一个新页面，你可以这样写：
```html
<a href="#" onclick="console.log('The link is clicked.'); return false">Click me</a>

在React 中，可以通过以下方式来代替：

function ActionLink(){
  function handleClick(e){
    e.preventDefault()
    console.log('The link was clicked.')
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  )
}

这里e 是一个合成事件（synthetic event）。React 根据W3C spce来定义合成事件（synthetic event），所以你不必担心跨浏览器适配（cross-browser compatibility）问题。参考SyntheticEvent 了解更多。

在使用React 时通常你不需要在一个DOM element创建之后，调用addEventListener去添加一个侦听器。相反，只需要在element 被初次渲染时添加一个侦听器就可以了。

当你使用ES6 class 定义一个组件（component）时，通常的做法是在类（class）中添加一个方法作为事件句柄（event handler）。例如，这个Toggle 组件就是渲染一个按钮（button）让用户在“ON”和“OFF”状态之间切换。

class Toggle extends Component {
  constructor(props){
    super(props)
    this.state = {
      isToggleOn: true
    }

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(){
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }))
  }

  render(){
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    )
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
)

你必须注意在JSX 回调函数中this 的含义。在JavaScript 中，类方法并不是默认绑定的（bound）。如果你忘记绑定this.handleClick 并把它传递给onClick，在实际被调用时，this 的值将会是undefined。

这并不是React-specific（特性）行为；它只是how functions work in JavaScript。通常如你引用一个函数并没有带()在其函数后面，例如onClick={this.handleClick} ，你需要绑定这方法。

如果调用bind 令你烦恼，这里有两种方法让你绕开它。如果你已经体验property initialize syntax，你可以使用属性初始化方法（property initializers）去正确的绑定回调函数。

class LoggingButton extends Component {
  // This syntax ensures `this` is bound within handleClick
  // Waring: this is *experimental* syntax
  handleClick = () => {
    console.log('This is:', this)
  }

  render(){
    return(
      <button onClick={this.handleClick}>
        Click me
      </button>
    )
  }
}

这个语法在Create React App 是默认的。

如果你不使用属性初始化语法（property initializer syntax），你可以在回调函数中使用箭头函数（arrow function）。

class LoggingButton extends Component {
  handleClick(){
    console.log('This is:', this)
  }

  render(){
    // This syntax ensures 'this' is bound within handleClick
    return(
      <button onClick={(e)=>this.handleClick(e)}>
        Click me
      </button>
    )
  }
}

这个问题是当LoggingButton 每一次被渲染时，都会创建一个不同的回调函数。在大多数情况下，这是可以承受的。然而，如果这个函数被作为prop 传递给子组件（lower components），这些组件可能还会做一次额外的渲染（an extra re-rendering）。我们通常建议在构造函数（contructor）中绑定回调函数来避免这类性能问题。

参考文档

react handing events

simplest redux example

发表于 2016-12-01 | 分类于技术 | | 阅读次数

简介

这是按照redux 中文文档进行实现的最简redux 实例，项目实例simplest-redux-example GitHub

Redux
Redux is a predictabel state container for JavaScript apps.
webpack
webpack is a module bundler.
babel
Babel is a compiler for writing next generation JavaScript.

阅读全文 »

Webpack Learning Notepad

发表于 2016-11-29 | 分类于技术 | | 阅读次数

Getting Start

webpack is a tool to build JavaScript modules in your application

阅读全文 »

JS Array reduce

发表于 2016-11-24 | 分类于技术 | | 阅读次数

介绍

对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。

阅读全文 »

Redux 入门教程

发表于 2016-11-24 | 分类于技术 | | 阅读次数

设计思想

Redux 的设计思想很简单，就两句话。

1. Web 应用是一个状态机，视图与状态是一一对应的。   
2. 所有的状态，保存在一个对象里面。

阅读全文 »

React Router Learning Notepad

发表于 2016-11-21 | 分类于技术 | 阅读次数

介绍

React Router 是完整的React 路由解决方案
React Router 保持UI 与URL 同步。它拥有简单的API 与强大的功能，例如：代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理。你第一个念头想到的应该是URL，而不是事后再想起。

阅读全文 »

hexo 常用命令

发表于 2016-11-17 | 分类于技术 | | 阅读次数

简介

这是一篇记录使用Hexo 写作的常用命令笔记

阅读全文 »