React——(一)

SPA

        Single-Page Apps和传统的web app有很大的不同，它带来了更流畅的体验。创建一个SPA时，我们会碰到三个比较主要的问题：

1、在一个SPA中，你会花费大量的时间来保证你的UI和数据同步。

2、对DOM的操作非常缓慢。在SPA中，响应用户操作和显示新内容最常用的方法就是操作DOM。

3、使用HTML模版很痛苦。

React：A javaScript library for building user interface。

        React特性：

1、自动的UI状态管理：使用React，你只需要关心UI的最终状态。

2、闪电般的DOM操作：不直接操作DOM，而是修改内存中的virtual DOM。操作virtual DOM是非常迅速的，React会在适当的时候更新真实的DOM。它通过比较virtual DOM和real DOM的不同来实现更新，明确重要的更改，保证最少的更改次数。这个过程称为reconciliation。

3、创建了真正可组合UI的APIs。与编程中的其他东西一样，模块化，紧凑化和自包含是个好主意。React创建的用户界面都是基于组件的。

4、完全用Javascript定义的视觉效果。这主要是由于HMTL本身主要用于数据的显示，互动方面有较大的局限性。React允许你使用一种称为JSX的语句，语法与Javascript完全兼容，来指定视觉效果。

5、单向数据流：React中的数据流向是从父组件流向子组件。

        React中一个重要的函数：ReactDOM.render()，用于渲染虚拟DOM，返回ReactElement类型。包含两个参数：

        1、要输出的HTML对象，通常用JSX编写。

        2、该对象在DOM中要渲染的位置。

        render()方法中可以使用变量有条件的渲染要展示的页面。

JSX：JavaScript XML

        JSX是一种语言，让你很容易的混合JavaScript和HTML标签来定义UI元素和其功能。但由于浏览器所能显示的内容由HTML，JavaScript和CSS三种元素组成，所以，最终的结果还需要将其转化为浏览器所能识别的语言。所以，我们创建一个基于Node和编译工具的环境，在编译的时候，将所有的JSX自动转换为JS。早期，Facebook提供了一个简单的工具JSXTransformer，直接将JSXTransformer.jsw文件直接引入HTML文档就能使用，这个是浏览器端具有转译功能的脚本。后来用于服务器端渲染的是react-tools。React v0.14之后，使用Babel作为转译工具。

       Babel原名6to5，是一个开源的转译工具，将ES6，ES7，JSX等语法，转译为当下可执行的JavaScript版本。

       JSX中，组件名称都要大写开头。HTML标签采用小写。

React Component

        React Component是可重用的JavaScript块，它通过JSX，输出HTML元素。Component组件创建的一个原则是只完成一件事。props和state是React组件中两个很重要的概念。props是外来数据，类似于面向对象编程中传递给构造函数的参数；state是组件内部的数据，类似于面向对象编程中的私有属性。React Component在调用的时候可以有参数，作为属性。可以使用this.props获取属性。还可以通过this.props.children获取其子组件。Component的属性，一旦被设定，是不可更改的。

        React要求属性必须向下传递，从父组件到子组件，这意味着不能跨层去传递一个属性，子组件也不能向父组件传递属性。当有多个属性需要传递的时候，我们使用Spread操作符(...)。但是这个解决方案也不是完美的，由于任何属性的改变都会导致component的更新，使用这个方法可能会带来性能瓶颈。

       state是组件会改变的部分。当你调用setState并更新state对象中的某些内容时，组件的render()方法将被自动调用。

       React在内部使用标识符来标记每个元素。当动态的创建元素的时候，却不会自动设置标识符。我们需要完成这样的工作。在每个组件上，使用key来给每个组件设定唯一标识符。

        创建一个React Component:

        class HelloWorld extends React.Component {

               construtor(props){

                     this.state={

                             strikes:0

                    };

              }

             timerTick(){

                    this.setState({strikes:this.state.strikes + 100 });

             }

             componentDidMount(){

                    setInterval(this.timerTick,1000);

            }

             render(){

                return( <div className="mystyle"><h1>{this.state.strikes}</h1>  </div> )

                }

         }

React中有几个属性是HTML中没有的：

1、Key：可选的唯一标识符，一般用于列表。

2、refs：任何组件都可以附加这个属性，给属性可以是字符串或者回调函数。当refs是一个回调函数式，函数接收底层DOM元素或实例作为参数，这样就可以直接方位这个DOM或者组件的节点了。

3、dangerouslySetInnerHTML