React概述什么是React？ 为什么要学习？ React入门React基本方案JSX基本语法创建虚拟DOM的两种方法1 .使用JSX创建虚拟DOM2.使用js创建虚拟DOM jsx语法规则模块和组件、模块化和组件化理解模块组件
什么是react？
用于构建React用户界面的JS库。 将数据渲染为HTML视图的开源JS库。
为什么要学习？ 本机JS操作DOM繁杂、效率低
使用JS直接操作DOM时，浏览器会进行大量的重新绘制和重新定位
本机JS没有组件化的编码方案，代码复用较低
React入门React基础案例1 .先装三个包：
【先引入react.development.js，再引入react-dom.development.js】
创建react.development.js react-DOM.development.js babel.min.js2 .容器
3 .创建虚拟DOM并将其渲染到容器
body！ -准备容器-- div id='test' /div/body！ -引入依赖。 部署时，必须遵循此步骤- -！ 部署react核心库--script src=' ./js/react.development.js ' type=' text/JavaScript '/script！ 引入react-dom以支持react操作DOM-- script src=' ./js/react-DOM.development.js ' type=' text/JavaScript '//-这里使用babel分析jsx语法。 --script type='text/babel' //1.虚拟DOM const VDOM=h1Hello/h1 //这里使用的是jsx语法。' '/2 .不需要添加渲染/script/html现在将此h1添加到页面中的此div容器中。
JSX基本语法如何创建两个虚拟DOM.使用JSX创建虚拟domconstvdom=(h1id={ myid.tolocaleuppercase ) } span class name=' SSS ' style={ }
2 .使用js创建虚拟DOM//1.创建虚拟DOM [此处使用js语法]React.createElement (标记、标记属性、内容) constvdom=react.crreated 如果标签特别多，建议使用JSX创建。
jsx语法规则定义虚拟DOM，不能使用“”
在标签中混合JS式时使用{}
的样式类名指定不使用class，而是使用className
内敛风格用大括号包起来
根标记不能有多个。 只有一个跟随标签
标签必须关闭
如果以小写字母开头，则标记将转换为html中具有相同名称的元素；如果html中没有与标记对应的元素，则报告错误。 如果以大写字母开头，react将渲染相应的组件，如果没有，则报告错误
body divid=' test '/div script type=' text/JavaScript ' src=' ./js/react.development.js '/script type=react
bel.min.js"></script> <script type="text/babel">/*此处一定要写babel*/ const Myid='abc' const MyData='Hollow,React' //创建虚拟DOM const VDOM=( <div> <h1 className='title' id={Myid.toLowerCase()}> <span style={{color:'white',fontSize:'20px'}}>{MyData.toLowerCase()}</span> </h1> <h1 className='title' id={Myid.toUpperCase()}> <span style={{color:'white',fontSize:'20px'}}>{MyData.toUpperCase()}</span> </h1> </div> ) //渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('test')) </script></body> 模块与组件、模块化与组件化的理解 模块 理解：向外提供特定功能的js程序, 一般就是一个js文件为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。作用：复用js, 简化js的编写, 提高js运行效率 组件 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)为什么要用组件： 一个界面的功能更复杂作用：复用编码, 简化项目编码, 提高运行效率 模块化当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
组件化当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
函数式组件 <body> <div id="test"></div> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel">/*此处一定要写babel*/ function MyComponent(){ return <h2>函数式组件</h2>//此处this是undefined,因为babel编译后开启了严格模式 } ReactDOM.render(<MyComponent/>,document.getElementById('test')) /* 执行了ReactDOM。render(<Mycomponent/>....之后，发生了什么?) 1.React解析组件标签，找到了Mycomponent组件 2.发现组价是使用函数定义的，随后调用函数，将返回的虚拟DOM传为真实DOM，随后呈现在页面中 */ </script></body> 类式组件 <body> <div id="test"></div> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel">/*此处一定要写babel*/ class Mycomponent extends React.Component{ render(){ //render是放在哪里的？ Mycomponent的原型上，供实例使用 //render中的this是谁？ Mycomponent的实例对象<=>Mycomponent组件实例对象 console.log(this) return <h1>我是用类定义的组件(适用于【复杂组件】的定义)</h1> } } ReactDOM.render(<Mycomponent/>,document.getElementById('test')) /* 执行了ReactDOM。render(<Mycomponent/>....之后，发生了什么?) 1.React解析组件标签，找到了Mycomponent组件 2.发现组价是使用函数定义的，随后new出来该类的实例，并通过实例调用到原型上的render方法 3.将render返回的虚拟DOM转为真实DOM,随后呈现到页面中 */ </script></body>