### React * * * * * React是用于Web开发的，React Native是用于移动端开发的，但是React Native是基于React语法的，所以我们要先说说React（还没看过React的不建议直接去看React Native）。 React并不是一个MVC框架，它只是一个构建界面的JS库，重点强调用户界面。React相当于MVC中的View层。 #### React的特性： * 虚拟DOM * 组件化 * 单项数据流 **虚拟DOM** > 组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。 虚拟DOM实现了视图渲染和刷新的一个性能优化。网页性能差很大一个原因是频繁的操作DOM导致，React不直接操作DOM，而是操作虚拟DOM，React开发都是先构建虚拟DOM，每次数据有变化时，会重新构建一个虚拟DOM树（在内存中），React通过DOM diff算法，将新的虚拟DOM树和上一次的虚拟DOM树进行比较，然后将实际有变化的部分在真实DOM上更新。实现最小化重绘，减少了不必要的DOM操作。 **组件化** 把一些功能相对独立的UI合成一个组件，然后把一些相关的小的组件又组合/嵌套成一个大的组件。最终完成UI的构建。 **组件化开发思路** 一个完整的UI相当于一个大的组件，大的组件又由一些小的组件嵌套组合而成。 优点：可以组合使用，重复使用，易于维护。   **单项数据流** React不同与传统的数据绑定，它是一个单项数据流，更灵活和便捷。 #### React基础语法 * JSX * 组件 * props和states * 生命周期 * 样式 **JSX** JSX并不是一个一个新语言，它只是一个语法糖，可以在js中写html标签，最后这些标签也会转换成js代码运行，组件结构更清晰直观。 ~~~ ReactDom.render( <h1> Hello JSX </h1>, document.getElementById('root') ); // h1标签并不是真正的html标签，最终会转换成js代码执行 ~~~ ~~~ // JSX等同于React.createElement创建一个ReactElement元素 ReactDom.render( React.createElement('h1',null,'Hello JSX'), document.getElementById('root') ); ~~~ ~~~ // 在JSX中使用js代码 const name = 'JSX'; ReactDom.render( <h1> Hello {name} </h1>, document.getElementById('root') ); ~~~ **组件** * 组件名称首字母一定要大写 （RN一样） * render方法是必须写的，return组件模板（RN一样） * 只能包含一个顶层标签（RN一样） ~~~ class Header extends Component { constructor(props){ super(props); // 相当于Component.constructor(props)，调用父类构造函数 } render() { return ( <div>我是一个Header组件</div> ) } } ~~~ `注意点：super` * 写了constructor就必须调用super，初始化父组件。 * 如果要在constructor中使用this.props。一定要传递参数props。 组件的生命周期可看demo，这点RN也是一样的。 **组件样式** * 内联样式（RN一样） * 对象样式（RN一样） * 选择器样式（需使用className） | web | React/ React Native | | --- | --- | --- | | 分号结尾 | 逗号结尾 | 逗号结尾 | | Key和value不加引号 | key不能有-，需驼峰式命名，value字符串需加引号| | 数字有单位 | 数字无单位 | 数字无单位 | **推荐博客教程：** * [React Native之React速学教程(上)](http://www.devio.org/2016/08/09/React-Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B-(%E4%B8%8A)/) * [React Native之React速学教程(中)](http://www.devio.org/2016/08/10/React-Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B-(%E4%B8%AD)/) * [React Native之React速学教程(下)](http://www.devio.org/2016/08/11/React-Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B-(%E4%B8%8B)/)