@zhongjianxin 2017-08-03T10:19:58.000000Z 字数 11196 阅读 1325

React Framework

Trainning

JS Basic in Browser

JS 里面的概念。

先说 DOM：DOM 全称是 Document Object
Model，也就是文档对象模型。

DOM 就是针对 HTML 和 XML

提供的一个API。什么意思？就是说为了能以编程的方法操作这个 HTML 的内容（比如添加某些元素、修改元素的内容、删除某些元素），我们把这个 HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如

你可以把 DOM 看成节点
image.png-13.4kB

上图是一个 html 文件，也就是网页的结构
- html 标签是一个节点（Node）。
- head、title、body、p 标签都是节点。
- 嵌套其他节点的节点叫做父节点。
- 被嵌套的节点叫做子节点。
- 同一个父节点下的节点叫做兄弟节点。
- 父亲的父亲以及上溯十八代祖宗叫做祖先节点。
- 儿子的儿子以及子子孙孙无穷匮也叫做后代节点。

Dom有什么用？

就是为了操作 HTML 中的元素，比如说我们要通过 JS 把这个网页的标题改了，直接这样就可以了：

 document.title = 'how to make love';

这个 API 使得在网页被下载到浏览器之后改变网页的内容成为可能。

document
当浏览器下载到一个网页，通常是 HTML，这个 HTML 就叫 document（当然，这也是 DOM 树中的一个 node），从上图可以看到，document 通常是整个 DOM 树的根节点。这个 document 包含了标题（document.title）、URL（document.URL）等属性，可以直接在 JS 中访问到。

在 JS 中，可以通过 document 访问其子节点（其实任何节点都可以），如document.body;

document.getElementById('xxx');

document.getElementById('xxx').innerHTML = "第一次成功的改变了DOM"

var x = document.querySelector("p");
x.onclick = function(){
    x.innerHTML = "第一次成功的改变了DOM";
}

BOM

是 Browser Object Model，浏览器对象模型。

刚才说过 DOM 是为了操作文档出现的接口，那 BOM 顾名思义其实就是为了控制浏览器的行为而出现的接口。浏览器可以做什么呢？比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。所以 BOM 就是为了解决这些事情出现的接口。

比如我们要让浏览器跳转到另一个页面，只需要

 location.href = "http://www.xxxx.com";

这个 location 就是 BOM 里的一个对象。windowwindow 也是 BOM 的一个对象，除去编程意义上的“兜底对象”之外，通过这个对象可以获取窗口位置、确定窗口大小、弹出对话框等等。例如我要关闭当前窗口：

 window.close();

总结一下题主的问题：

DOM 是为了操作文档出现的 API，document 是其的一个对象；
BOM 是为了操作浏览器出现的 API，window 是其的一个对象。

进阶认知

Javascript 不能够真正改变 DOM，它仅仅是改变呈现内容，当你刷新的时候就会发现我靠这怎么他妈的什么都还原了。
但是你可以把这些改变传递给服务器，由后端比如 JAVA 来进行后续的操作， JAVA可以改变底层数据。
用户的交互比如弹窗等等根本没必要让服务器也跟着掺和，why? 因为交互只是暂时的，用完了，还要变成默认的，不需要你保存到服务器，只要保证你点击的时候有反馈就行了。
这就是前端。
a. HTML 表达静态结构（有哪些元素，每个元素代表什么意义，而不是内容）
b. CSS 呈现美化（元素的颜色，形状，布局）
c. Javascript 负责动态交互（操作 DOM，使用 Ajax 进行异步刷新，与服务器交互）

1.What is React

前端框架基本工作模型

image.png-124.6kB

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

2.Why choose React

React 特点

1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −(Virtual DOM)React通过对DOM的模拟，最大限度地减少与DOM的交互。
- 算法实现
  2.1 步骤一：用JS对象模拟DOM树
  2.2 步骤二：比较两棵虚拟DOM树的差异
  2.3 步骤三：把差异应用到真正的DOM树上
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。
- React 使用 JSX 来替代常规的 JavaScript。
  JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
  优点：
  - JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
  - 它是类型安全的，在编译过程中就能发现错误。
  - 使用 JSX 编写模板更加简单快速。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

3.How is React working

1. ReactDOM.render ：

React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

    ReactDOM.render(
     <h1>Hello, world!</h1>,
     document.getElementById('example'));

2.JSX 语法

上一节的代码， HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，

它允许 HTML 与 JavaScript 的混写。

var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

上面代码体现了 JSX 的基本语法规则：
1. 遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；
2. 遇到代码块（以 { 开头），就用 JavaScript 规则解析。上面代码的运行结果如下。

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

上面代码的arr变量是一个数组，结果 JSX 会把它的所有成员，添加到模板，运行结果如下。

3.Component

简单组件
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});
ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);

错误组件
上面代码中，变量 HelloMessage 就是一个组件类。模板插入时，会自动生成 HelloMessage 的一个实例（下文的"组件"都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。
注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。

var HelloMessage = React.createClass({
  render: function() {
    return <h1>
      Hello {this.props.name}
    </h1><p>
      some text
    </p>;
  }
});

上面代码会报错，因为HelloMessage组件包含了两个顶层标签：h1和p。
组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如，
就是 HelloMessage 组件加入一个 name 属性，值为 John。组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。上面代码的运行结果如下。

组合组件

var WebSite = React.createClass({
  render: function() {
    return (
      <div>
        <Name name={this.props.name} />
        <Link site={this.props.site} />
      </div>
    );
  }
});
var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});
var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});
ReactDOM.render(
  <WebSite name="菜鸟教程" site=" http://www.runoob.com" />,
  document.getElementById('example')
);

注意:
- class 属性需要写成 className
- for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

4. this.state

Changeable
Local value have to be self managed

组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});
ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

上面代码是一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

React 的数据载体：state、props、context

- Key Concept in React
- Work Mechanism

5.this.props

Readonly
PropType Check
Have to be passed from parent

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={() => alert('click')}> //onClick=this.props.onClick
        {this.props.value}
      </button>
    );
  }
}

在应用中组合使用 state 和 props 。我们可以在父组件中设置 state，并通过在子组件上使用 props 将其传递到子组件上。在 render 函数中, 我们设置 name 和 site 来获取父组件传递过来的数据。

var WebSite = React.createClass({
  getInitialState: function() {
    return {
      name: "菜鸟教程",
      site: "http://www.runoob.com"
    };
  },
  render: function() {
    return (
      <div>
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
});
var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});
var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});
ReactDOM.render(
  <WebSite />,
  document.getElementById('example')
);

6.组件生命周期

组件的生命周期分成三个状态：

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
这些方法的详细说明，可以参考官方文档。下面是一个例子。

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },
  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },
  render: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});
ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

上面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。
另外，组件的style属性的设置方式也值得注意，不能写成

style="opacity:{this.state.opacity};"

而要写成

style={{opacity: this.state.opacity}}

这是因为 React 组件样式是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。

Completed Demo for React Component Lifecycle

4.Demo and Practice

Demos Github
再找一些练习题能够涵盖上面的知识点。

5.Key points during developing with React

找一些注意事项和最佳实践！

Form

const Text = props => <input type="text" {...props}/>
const Select = ({options, ...others}) => (
  <select {...others}>
    {Object.keys(options)
      .map((optionKey, index) => (
        <option value={optionKey} key={index}>{options[optionKey]}</option>
      ))
    }
  </select>
)

State

Using State Correctly

There are three things you should know about setState().

Do Not Modify State Directly
For example, this will not re-render a component:

// Wrong
this.state.comment = 'Hello';
Instead, use setState():
// Correct
this.setState({comment: 'Hello'});

The only place where you can assign this.state is the constructor.

State Updates May Be Asynchronous

React may batch multiple setState() calls into a single update for performance.

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

For example, this code may fail to update the counter:

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

To fix it, use a second form of setState() that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument:

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

We used an arrow function above, but it also works with regular functions:

// Correct
this.setState(function(prevState, props) {
  return {
    counter: prevState.counter + props.increment
  };
});

State Updates are Merged

When you call setState(), React merges the object you provide into the current state.

For example, your state may contain several independent variables:

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

Then you can update them independently with separate setState() calls:

  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });
    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

The merging is shallow, so this.setState({comments}) leaves this.state.posts intact, but completely replaces this.state.comments.

The Data Flows Down

Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn't care whether it is defined as a function or a class.

A component may choose to pass its state down as props to its child components:

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
This also works for user-defined components:
<FormattedDate date={this.state.date} />

The FormattedDate component would receive the date in its props and wouldn't know whether it came from the Clock's state, from the Clock's props, or was typed by hand:

function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

This is commonly called a "top-down" or "unidirectional" data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree.

If you imagine a component tree as a waterfall of props, each component's state is like an additional water source that joins it at an arbitrary point but also flows down.

To show that all components are truly isolated, we can create an App component that renders three s:

function App() {
  return (
    <div>
      <Clock />
      <Clock />
      <Clock />
    </div>
  );
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Each Clock sets up its own timer and updates independently.

In React apps, whether a component is stateful or stateless is considered an implementation detail of the component that may change over time. You can use stateless components inside stateful components, and vice versa.

Ref

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。
这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

var MyComponent = React.createClass({
  handleClick: function() {
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();
  },
  render: function() {
    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});
ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

List with Key indeed

React list key limited

6.Manage React of ES6 syntax with npm and webpack

a. ES6 Syntax and and New Component for react component

class MyComponent extends React.Component {
  render() {
    return <div>Hello</div>
  }
}

const MyComponent = (props) => <div>Hello</div>

2. 什么时候使用Component?

State
Lifecycle

class MyComponent extends React.Component {
  constructor() {
    super()
    this.state = {
      target: 'loading'
    }
  }
  componentDidMount() {
    this.setState({
      target: 'loaded'
    })
  }
  render() {
    return <div>State: {this.state.target}</div>
  }
}

Toturials

build with react
[]
React Toturials with Examples

References:

React 源码剖析系列 T－生命周期的管理艺术
 深入浅出React高阶组件
 Airbnb React编码规范
 Learn React without React
Virtual Dom
Reaact Toturial References