react-笔记（1）

一、概念

    1）2013年5月发布。

     2）React 把用户界面抽象成一个个组件，如按钮组件 Button、对话框组件 Dialog、日期组件 Calendar。开发者经过组合这些组件，最终获得功能丰富、可交互的页面。

     3）经过引入 JSX 语法，复用组件变得很是容易，同时也能保证组件结构清晰。

     4）有了组件这层抽象，React 把代码和真实渲染目标隔离开来，除了能够在浏览器端渲染到 DOM 来开发网页外，还能用于开发原生移动应用。

 

---

二、特色

    1）声明式设计      −React采用声明范式

          声明式是告诉计算机要去作什么而无论怎么作。

          命令式是要描述如何去作。

     2）高效     −React经过对DOM的模拟(虚拟dom)，最大限度地减小与DOM的交互。

     3）灵活    −React能够与已知的库或框架很好地配合。

     4）Jsx语法     − JSX 是 JavaScript 语法的扩展。(对比模版引擎)

     5）组件   − 经过 React 构建组件，使得代码更加容易获得复用，可以很好的应用在大项目的开发中。

     6）单向响应的数据流    − React 实现了单向响应的数据流，这也是它为何比传统数据绑定更简单。

 

---

三、专一视图层

    1）React 并非完整的 MVC/MVVM 框架，它专一于提供清晰、简洁的 View（视图）层解决方案。

    2）与模板引擎不一样，React 不只专一于解决 View 层的问题，又是一个包括 View 和 Controller 的库。

    3）对于复杂的应用，能够根据应用场景自行选择业务层框架，并根据须要搭配 Flux、Redux、GraphQL/Relay 来使用。

    4）React 不像其余框架那样提供了许多复杂的概念与烦琐的 API，它以 Minimal API Interface 为目标，只提供组件化相关的很是少许的 API

    5）为了保持灵活性，它没有自创一套规则，而是尽量地让用户使用原生 JavaScript 进行开发。

 

---

四、Virtual Dom

    1、传统dom更新：

        真实页面对应一个 DOM 树。在传统页面的开发模式中，每次须要更新页面时，都要手动操做 DOM 来进行更新

 

 

    2、虚拟dom：

        1)  DOM 操做很是昂贵。在前端开发中，性能消耗最大的就是 DOM 操做，并且这部分代码会让总体项目的代码变得难以维护。

         2) React 把真实 DOM 树转换成 JavaScript 对象树，也就是 Virtual DOM

 

---

五、函数式编程-----react的精髓

    它属于"结构化编程"的一种，主要思想是把运算过程尽可能写成一系列嵌套的函数调用。

    函数编程式的好处：

        1）代码简洁，开发速度快

        2）接近天然语言，易于理解

        3）更方便代码管理

        4）易于“并发编程”

        5）代码的热升级

 

---

六、JSX语法

    1）JSX 将 HTML 语法直接加入到 JavaScript 代码中，再经过翻译器转换到纯 JavaScript 后由浏览器执行。

    2）编译过程由Babel 的 JSX 编译器实现。

    3）JSX 的官方定义是类 XML 语法的 ECMAScript 扩展。

    4）它完美地利用了 JavaScript 自带的语法和特性，并使用你们熟悉的 HTML 语法来建立虚拟元素。

 

---

    一、XML基本语法

        定义标签时，只容许被一个标签包裹。标签必定要闭合。

    二、元素类型

        1）小写首字母对应 DOM 

        2）元素大写首字母对应组件元素 

        3）注释使用js注释方法

    三、元素属性

        1）class 属性改成 className

        2）for 属性改成 htmlFor

        3）Boolean 属性：省略 Boolean 属性值会致使 JSX 认为 bool 值设为了 true

    四、JavaScript 属性表达式

        属性值要使用表达式，只要用 {} 替换 “” 便可

        eg：

               <input type="text" value={val ? val : ""} />

    五、HTML 转义

        1）React 会将全部要显示到 DOM 的字符串转义，防止 XSS。

        2）后台传过来的数据带页面标签的是不能直接转义的

        3）具体转义写法：

            var content='<strong>content</strong>';                                     React.render(     

                <div dangerouslySetInnerHTML={{__html: content}}>                    </div>,     

                    document.body 

             );

        4）ReactDOM.render

                做用：描画dom

                参数1：dom对象

                参数2：注入点

                参数3：回调函数（渲染是否成功）

                 eg：

                        ReactDOM.render(  

                            <div>Hello World!</div>,                     document.querySelector('#wrapper')

                            ()=>{  console.log("渲染成功") }

                         );

         5）React.createClass

                做用：声明组件

                render方法：

                render: function(){       

                     return (            

                         <input type="button"  value="hello world!!!!" />                       )     

                 }