ReactJs入门.ppt

对ReactJs的认知 一、ReactJS原理与组件化 React引入虚拟DOM的机制：基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。 所谓组件，即封装起来的具有独立功能的UI部件。 React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。 React组件的特性：可重用性、可组合性、可维护性。 二、ReactJs使用 React不需要安装，直接到官网下载ReactJs即可。 一个完整使用例子： !DOCTYPE html html head meta charset=UTF-8 / titleHello React!/title script src=/assets/react/react-0.14.7/build/react.min.js/script script src=/assets/react/react-0.14.7/build/react-dom.min.js/script script src=/assets/react/browser.min.js/script /head body div id=example/div script type=text/babel ReactDOM.render( h1Hello, world!/h1, document.getElementById(example) ); /script /body /html react.js 、react-dom.js 和 Browser.js这三个库需先加载 react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，应该将它放到服务器完成。 凡是使用 JSX 的地方，都要加上 type=text/babel，JSX遇开头用html规则解析，遇到{用Javascript规则解析。 模板转为html语言并插入DOM节点 ReactDOM.render( h1Hello, world!/h1, document.getElementById(example) ); var names=[alice,emily,kate]; ReactDOM.render( div { names.map(function(name){ return divHello,{name}!/div }) } /div, document.getElementById(example) ); 2.1 Hello World例子 !DOCTYPE html html head script src=../build/react.js/script script src=../build/react-dom.js/script script src=../build/browser.min.js/script /head body div id=example/div script type=text/babel ReactDOM.render( h1Hello, world!/h1, document.getElementById(example) ); /script /body /html 2.2 ReactJS组件 创建组件 React 允许将代码封装成组件，然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。 组件类首字母必须大写 组件类只能够包含一个顶层标签 组件类必须有自己的render方法，用于输出组件 组件属性用ps获取（注：class要变为className,for变为htmlFor） 自定义属性用data-为前缀 var HelloWorld=React.createClass({ render:function(){ return h1 Hello {}/h1;