作者：胡子大哈
原文链接： http://huziketang.com/books/react/lesson1

看了 react.js 小书 第一阶段的内容，边看边做一点记录，整理了一些知识点。仅供学习。

6.使用 JSX 描述 UI 信息

JSX 原理

React.js 把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法，这样写起来就方便很多了。编译的过程会把类似 HTML 的 JSX 结构转换成 JavaScript 的对象结构。

使用 React 和 JSX 的时候一定要经过编译的过程。

这里再重复一遍：所谓的 JSX 其实就是 JavaScript 对象。

JSX 是 JavaScript 语言的一种语法扩展，长得像 HTML，但并不是 HTML。JSX 在编译的时候会变成相应的 JavaScript 对象描述。

react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到页面上。

可以想象有一个叫 react-canvas 可以帮我们把 UI 渲染到 canvas 上，或者是有一个叫 react-app 可以帮我们把它转换成原生的 App（实际上这玩意叫 ReactNative）。

7.组件的 render 方法

React.js 中一切皆组件，用 React.js 写的其实就是 React.js 组件。

条件返回 JSX 的方式在 React.js 中很常见，组件的呈现方式随着数据的变化而不一样，你可以利用 JSX 这种灵活的方式随时组合构建不同的页面结构。

8.组件的组合、嵌套和组件树

class Title extends Component {
  render () {
    return (
      <h1>React 小书</h1>
    )
  }
}

class Header extends Component {
  render () {
    return (
      <div>
        <Title />
      </div>
    )
  }
}

我们可以直接在 Header 标签里面直接使用 Title 标签。就像是一个普通的标签一样。

这样可复用性非常强，我们可以把组件的内容封装好，然后灵活在使用在任何组件内。

自定义的组件都必须要用大写字母开头，普通的 HTML 标签都用小写字母开头。

组件可以和组件组合在一起，组件内部可以使用别的组件。就像普通的 HTML 标签一样使用就可以。这样的组合嵌套，最后构成一个所谓的组件树.

9.事件监听

在 React.js 里面监听事件是很容易的事情，你只需要给需要监听事件的元素加上属性类似于 onClick、onKeyDown 这样的属性。

class Title extends Component {
  handleClickOnTitle () {
  console.log('Click on title.')
}

render () {
  return (
    <h1 onClick={this.handleClickOnTitle}>React 小书</h1>
    )
  }
}

在 React.js 不需要手动调用浏览器原生的addEventListener进行事件监听。React.js 帮我们封装好了一系列的on*的属性，而且你不需要考虑不同浏览器兼容性的问题，React.js 都帮我们封装好这些细节了。

React.js 封装了不同类型的事件，具体可见官方文档：合成事件。另外要注意的是，这些事件属性名都必须要用驼峰命名法。

没有经过特殊处理的话，这些on*的事件监听只能用在普通的 HTML 的标签上，而不能用在组件标签上。也就是说，<Header onClick={…} />这样的写法不会有什么效果的。这一点要注意，但是有办法可以做到这样的绑定，以后我们会提及。现在只要记住一点就可以了：这些on*的事件监听只能用在普通的 HTML 的标签上，而不能用在组件标签上。

event 对象

和普通浏览器一样，事件监听函数会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致。

不同的是 React.js 中的 event 对象并不是浏览器提供的，而是它自己内部所构建的。

class Title extends Component {
  handleClickOnTitle (e) {
    console.log(e.target.innerHTML)
  }

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle}>React 小书</h1>
    )
  }
}

每次点击的时候就会打印“React 小书”。

关于事件中的 this

一般在某个类的实例方法里面的 this 指的是这个实例本身。

如果你想在事件函数当中使用当前的实例，你需要手动地将实例方法 bind 到当前实例上再传入给 React.js。

class Title extends Component {
  handleClickOnTitle (e) {
    console.log(this)
  }

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle.bind(this)}>React 小书</h1>
    )
  }
}

bind会把实例方法绑定到当前实例上，然后我们再把绑定后的函数传给 React.js 的onClick事件监听。

总结：
- 为 React 的组件添加事件监听是很简单的事情，你只需要使用 React.js 提供了一系列的 on* 方法即可。
- React.js 会给每个事件监听传入一个 event 对象，这个对象提供的功能和浏览器提供的功能一致，而且它是兼容所有浏览器的。
- React.js 的事件监听方法需要手动 bind 到当前实例，这种模式在 React.js 中非常常用。

10.组件的 state 和 setState

一个组件的显示形态是可以由它数据状态和配置参数决定的。React.js 的state就是用来存储这种可变化的状态的。

setState方法由父类 Component 所提供。当我们调用这个函数的时候，React.js 会更新组件的状态 state ，并且重新调用 render 方法，然后再把 render 方法所渲染的最新的内容显示到页面上。

setState 接受函数参数

这里还有要注意的是，当你调用 setState 的时候，React.js 并不会马上修改 state。而是把这个对象放到一个更新队列里面，稍后才会从队列当中把新的状态提取出来合并到 state 当中，然后再触发组件更新。

React.js 会把上一个 setState 的结果传入一个函数，你就可以使用该结果进行运算、操作，然后返回一个对象作为更新 state 的对象。

...
  handleClickOnLikeButton () {
    this.setState((prevState) => {
      return { count: 0 }
    })
    this.setState((prevState) => {
      return { count: prevState.count + 1 } // 上一个 setState 的返回是 count 为 0，当前返回 1
    })
    this.setState((prevState) => {
      return { count: prevState.count + 2 } // 上一个 setState 的返回是 count 为 1，当前返回 3
    })
    // 最后的结果是 this.state.count 为 3
  }
...

这样就可以达到上述的利用上一次 setState 结果进行运算的效果。

setState 合并

上面我们进行了三次 setState，但是实际上组件只会重新渲染一次，而不是三次；这是因为在 React.js 内部会把 JavaScript 事件循环中的消息队列的同一个消息中的 setState 都进行合并以后再重新渲染组件。

你只需要记住的是：在使用 React.js 的时候，并不需要担心多次进行 setState 会带来性能问题。

11.配置组件的 props

如果想让组件能适应不同场景下的需求，我们就要让组件具有一定的“可配置”性。

React.js 的props就可以帮助我们达到这个效果。每个组件都可以接受一个 props 参数，它是一个对象，包含了所有你对这个组件的配置。

render () {
  const likedText = this.props.likedText || '取消'
  const unlikedText = this.props.unlikedText || '点赞'
  return (
    <button onClick={this.handleClickOnLikeButton.bind(this)}>
        {this.state.isLiked ? likedText : unlikedText} 
    </button>
  )
}

如何把 props 传进去呢？在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为 props 对象的键值：

class Index extends Component {
  render () {
    return (
      <div>
        <LikeButton likedText='已赞' unlikedText='赞' />
      </div>
    )
  }
}

JSX 的表达式插入可以在标签属性上使用。所以其实可以把任何类型的数据作为组件的参数，包括字符串、数字、对象、数组、甚至是函数等等。

<LikeButton wordings={{likedText: '已赞', unlikedText: '赞'}} />

现在我们把 likedText 和 unlikedText 这两个参数封装到一个叫 wordings 的对象参数内，然后传入点赞组件中。

render () {
  const wordings = this.props.wordings || {
    likedText: '取消',
    unlikedText: '点赞'
  }
  return (
    <button onClick={this.handleClickOnLikeButton.bind(this)}>
        {this.state.isLiked ? wordings.likedText : wordings.unlikedText} 
    </button>
  )
}

一个组件的行为、显示形态都可以用 props 来控制，可以达到很好的可配置性。

默认配置 defaultProps

上面的组件默认配置我们是通过||操作符来实现。这种需要默认配置的情况在 React.js 中非常常见，所以 React.js 也提供了一种方式defaultProps，可以方便的做到默认配置。

class LikeButton extends Component {
  static defaultProps = {
    likedText: '取消',
    unlikedText: '点赞'
  }

  constructor () {
    super()
    this.state = { isLiked: false }
  }

  handleClickOnLikeButton () {
    this.setState({
      isLiked: !this.state.isLiked
    })
  }

  render () {
    return (
      <button onClick={this.handleClickOnLikeButton.bind(this)}>
        {this.state.isLiked
          ? this.props.likedText
          : this.props.unlikedText} 
      </button>
    )
  }
}

props 不可变

props 一旦传入进来就不能改变。

你不能改变一个组件被渲染的时候传进来的 props。React.js 希望一个组件在输入确定的 props 的时候，能够输出确定的 UI 显示形态。

但这并不意味着由 props 决定的显示形态不能被修改。组件的使用者可以主动地通过重新渲染的方式把新的 props 传入组件当中，这样这个组件中由 props 决定的显示形态也会得到相应的改变。

总结：
- 为了使得组件的可定制性更强，在使用组件的时候，可以在标签上加属性来传入配置参数。
- 组件可以在内部通过 this.props 获取到配置参数，组件可以根据 props 的不同来确定自己的显示形态，达到可配置的效果。
- 可以通过给组件添加类属性 defaultProps 来配置默认参数。
- props 一旦传入，你就不可以在组件内部对它进行修改。但是你可以通过父组件主动重新渲染的方式来传入新的 props，从而达到更新的效果。

12.state vs props

state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState 方法进行更新，setState 会导致组件的重新渲染。

props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props，否则组件的 props 永远保持不变。

state 和 props 有着千丝万缕的关系。它们都可以决定组件的行为和显示形态。但是它们的职责其实非常明晰分明：state 是让组件控制自己的状态，props 是让外部对组件自己进行配置。

没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。

React.js 非常鼓励无状态组件，在 0.14 版本引入了函数式组件 —— 一种定义不能使用 state 组件，你可以理解函数式组件就是一种只能接受 props 和提供 render 方法的类组件。

13.渲染列表数据

渲染存放 JSX 元素的数组

JSX 的表达式插入 {} 里面可以放任何数据，如果我们往 {} 里面放一个存放 JSX 元素的数组会怎么样？

class Index extends Component {
  render () {
    return (
      <div>
        {[
          <span>React.js </span>,
          <span>is </span>,
          <span>good</span>
        ]}
      </div>
    )
  }
}

到浏览器中，你在页面上会看到：“React.js is good”。
React.js 把插入表达式数组里面的每一个 JSX 元素一个个罗列下来，渲染到页面上。如果你往 {} 放一个数组，React.js 会帮你把数组里面一个个元素罗列并且渲染出来。

使用 map 渲染列表数据

const users = [
  { username: 'Jerry', age: 21, gender: 'male' },
  { username: 'Tomy', age: 22, gender: 'male' },
  { username: 'Lily', age: 19, gender: 'female' },
  { username: 'Lucy', age: 20, gender: 'female' }
]

class Index extends Component {
  render () {
    const usersElements = [] // 保存每个用户渲染以后 JSX 的数组
    for (let user of users) {
      usersElements.push( // 循环每个用户，构建 JSX，push 到数组中
        <div>
          <div>姓名：{user.username}</div>
          <div>年龄：{user.age}</div>
          <div>性别：{user.gender}</div>
          <hr />
        </div>
      )
    }

    return (
      <div>{usersElements}</div>
    )
  }
}

这里用了一个新的数组 usersElements，然后循环 users 数组，为每个 user 构建一个 JSX 结构，然后 push 到 usersElements 中。然后直接用表达式插入，把这个 userElements 插到 return 的 JSX 当中。

但我们一般不会手动写循环来构建列表的 JSX 结构，可以直接用 ES6 自带的map。

class Index extends Component {
  render () {
    return (
      <div>
        {users.map((user) => {
          return (
            <div>
              <div>姓名：{user.username}</div>
              <div>年龄：{user.age}</div>
              <div>性别：{user.gender}</div>
              <hr />
            </div>
          )
        })}
      </div>
    )
  }
}

这样的模式在 JavaScript 中非常常见，一般来说，在 React.js 处理列表就是用 map 来处理、渲染的。

对于用表达式套数组罗列到页面上的元素，都要为每个元素加上 key 属性，这个 key 必须是每个元素唯一的标识。

14.实战分析：评论功能

我们遵循一个原则：如果一个文件导出的是一个类，那么这个文件名就用大写开头。四个组件类文件导出都是类，所以都是大写字母开头。

类似于<input />、<select />、<textarea> 这些元素的 value 值被 React.js 所控制、渲染的组件，在 React.js 当中被称为受控组件（Controlled Component）。对于用户可输入的控件，一般都可以让它们成为受控组件，这是 React.js 所推崇的做法。