教程

IBM简要介绍 https://www.ibm.com/developerworks/cn/web/1509_dongyue_react/index.html

官方教程：
https://reactjs.org/tutorial/tutorial.html

菜鸟教程：
http://www.runoob.com/react/react-tutorial.html

配置使用：
https://zhenyong.github.io/react/docs/getting-started.html

学习

关键词：

组件component
虚拟DOM
数据的单向流动

特点：

React不是一个MVC框架，它是构建易于可重复调用的web组件，侧重于UI, 也就是view层
React是单向的从数据到视图的渲染，非双向数据绑定
不直接操作DOM对象，而是通过虚拟DOM通过diff算法以最小的步骤作用到真实的DOM上。
不便于直接操作DOM，大多数时间只是对 virtual DOM 进行编程

React 中的基本概念

React.js
React.js 是 React 的核心库，在应用中必须先加载核心库。
ReactDOM.js
ReactDOM.js 是 React 的 DOM 渲染器，React 将核心库和渲染器分离开了，为了在 web 页面中显示开发的组件，需要调用 ReactDOM.render 方法，第一个参数是 React 组件，第二个参数为 HTMLElement。
JSX
JSX 是 React 自定义的语法，最终 JSX 会转化为 JS 运行于页面当中。
组件
组件是 React 中的核心概念，页面当中的所有元素都是通过 React 组件来表达，我们将要写的 React 代码绝大部分都是在做 React 组件的开发。
VIRTUAL DOM
React 抽象出来的虚拟 DOM 树，虚拟树是 React 高性能的关键。单向数据流：one-way reactive data flow React 应用的核心设计模式，数据流向自顶向下
组合模式：
组合模式有时候又叫做部分-整体模式，它使我们树型结构的问题中，模糊了简单元素和复杂元素的概念，客户程序可以向处理简单元素一样来处理复杂元素,从而使得客户程序与复杂元素的内部结构解耦。React 就是基于组合模式，无论是应用等级还是一个表单亦或是一个按钮都视为一个组件，然后基于组件的组合构建整个应用，这样的结构一直是前端界想要却迟迟不来的 web component。

使用：

使用的基本流程是：
创建component，
各种component各种组合composition；
显示components。

两种component创建
一种是无状态变化的，使用正常的js function语法，return JSX 即可。
```
const DemoComponent = function() {
  return (
 <div className='customClass' />
  );
};
```

另一种则是有状态变化的常用的React Component。

class Kitten extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <h1>Hi</h1>
    );
  }
}

React的一个重要的特色就是通过component的各种组合来实现所需功能。

return (
<App>
  <Navbar />
  <Dashboard />
  <Footer />
</App>
)

定义默认props并进行类型检查：

MyComponent.defaultProps = { location: 'San Francisco' }
MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }

State参数的使用

State是react中一个很重要的概念，用来跟踪组件内部重要数据或状态的变化，进一步控制UI render。且state参数只对拥有它的component可见，除非它作为props传递给子组件。可以使用this.state来获取state参数的值并使用。

this.setState({
  username: 'Lewis'
});

父子组件间参数的传递

可以将全部的state或部分的state通过props传给子组件。

在父组件中：<Navbar name={this.state.name} />
子组件中：<h1>Hello, my name is: {this.props.name} </h1>

父子组件之间除了可以通过state-props传递数据之外，还可以传递handle function。
传递function的方式和传递state date的方式相似。

为component定义method：

除了在component中通过定义和更新state来管理数据外，还可以给组件定义方法。
多数情况定义event handler function，为了能够访问组件内部的成员和数据，要使用this来绑定。
this.handleClick = this.handleClick.bind(this)
通过state+ method，可以实现很多功能。

controlled input and form

如果你的component中包含由用户输入信息的元素，可以为input, textarea此类元素，也可以为整个form，那么这个component就被称为controlled component。
React可以很好的管理这些涉及用户输入的元素的状态，根据state, event handler来很好的处理。

7.lifecycle methods

可参考 https://github.com/axuebin/react-blog/issues/9

React提给了很多在component整个生命周期中某个特定时刻运行的函数，称为lifecycle methods, or lifecycle hooks, 允许在某些特定时刻截获组件进行处理。
主要有：

componentWillMount()

componentDidMount()

componentWillReceiveProps()

shouldComponentUpdate()

componentWillUpdate()

componentDidUpdate()

componentWillUnmount()

React组件的生命周期可以分为挂载、渲染和卸载这几个阶段，当渲染后的组件更新后，会重新渲染组件，直到卸载。

挂载阶段（Mounting)
属于这个阶段的生命周期函数有：

constructor()
componentWillMount()
render()
componentDidMount()

更新阶段（Updating)
属性或状态的改变会触发一次更新。当一个组件在被重新渲染时，这些方法将会被调用：

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

卸载阶段
该方法将会在 component 从DOM中移除时调用
componentWillUnmount()

lifecycle method 详解

componentWillMount()
在render()执行之前被调用，此时组件即将mounted to DOM,“组件即将被挂载” ，相当于页面的load操作。所以这个函数是组件首次渲染（render）前调用的。
在每次页面加载、刷新时，或者某个组件第一次展现时都会调用这个函数。在这个函数中，不应该改变组件的状态，也就是不要执行this.setState，需要保持render()函数的纯净。
componentDidMount()
当组件被mounted to DOM后调用。在这里调用setState()会引发组件的re-render。如果在这里调用API，并使用API返回的数值set state时，一旦接收到数据，会自动触发更新。这个函数也经常用来绑定event listener。这个函数在组件加载渲染完成后立即调用，此时页面上已经渲染出真实的DOM了，可以在这个函数中访问到真实的DOM（可以通过this.refs来访问真实DOM）。

在这个阶段，还可以做一件事，可以修改state了！！！

而且，异步获取数据在这个阶段执行也是比较合理的，获取数据之后setState，然后重新渲染组件。
componentWillUnmount()
卸载之前进行相关清理工作，最常见的为删除event handler。
componentWillReceiveProps()
组件接收props之前运行，将新的将要接收的props作为一个参数传入，名字为nextProps，可以将它与当下的参数this.props进行对比，并根据比较结果在组件更新之前进行相关操作。
已加载的组件在props发生变化时调用，若需要更新状态，可能需要对比this.props和nextProps，然后在该方法中使用this.setState来处理状态的改变。
需要注意的是，有些情况下，即使props未改变也会触发该函数，所以一定要先比较this.props和nextProps再做操作。
该函数只监听props的改变，this.setState不会触发这个函数。
componentWillUpdate()
在接收到新的props或者state之后，这个函数就会在render前被调用。同样的，在这个函数中不能使用this.setState()。如果需要更新状态，请在componentWillReceiveProps中调用this.setState()。
componentDidUpdate()
在组件re-render后即刻运行。当组件接收到新的props或者state时，会re-render自身和所有的子组件。
shouldComponentUpdate()
决定要不要更新显示。
此函数接收两个参数:nextProps, nextState。主要用来优化性能。
比如props如果没有改动，那么就可以不用re-render。可以通过比较this.props and nextProps来决定要不要重新render，以此来提高性能。
还可以对新参数进行过滤操作，比如只有参数满足某些条件时才进行re-render。
1.返回true就是紧接着以下的生命周期函数；
2.返回false表示组件不需要重新渲染，不再执行任何生命周期函数（包括render）。

周期图（https://www.jianshu.com/p/b49fe87d2153）

Welcome to my Code Garden!

Enjoy Coding

教程

学习

关键词：

特点：

React 中的基本概念

使用：