了解React~
它是一个将数据渲染为HTML视图 的js库，采用组件化模式，声明式编码，提高开发效率和组件复用性；在React Native中可以用react预发进行安卓、ios移动端开发；使用虚拟dom和有些的diffing算法，尽量减少与真实dom的交互，提高性能。
目录
一、React JSX
二、模块与组件的理解
三、React面向组件编程
一、React JSX
首先，我们的准备工作：
<!-- 准备好容器 --> <div id="root"></div> <!-- 引入react核心库 --> <script src="./js/react.development.js"></script> <!-- 引入react扩展库 操作DOM元素 --> <script src="./js/react-dom.development.js"></script> <!-- 把JSX语法转化为JS --> <script src="./js/babel.min.js"></script>我们的工作原理，是将虚拟DOM转换成真实DOM。
其次，我们创建虚拟DOM有两种方式：JS和JSX。
但是通过JS来创建对于我们来说十分的不方便，用JSX来创建虚拟DOM也只是JS的一个语法糖，最后还是转换成html结构的形式，所以一般我们用JSX来创建虚拟DOM，但是我们还是来看一下区别。
通过JS创建虚拟DOM：
<script> // 通过JS来创建虚拟DOM const V_DOM = React.createElement("p",{title:'react'},React.createElement('span',{},'hello,react~')) ReactDOM.render(V_DOM,document.getElementById('root')) </script>通过JSX创建虚拟DOM：
<script type="text/babel"> // 1.创建虚拟DOM const V_DOM = ( <h1> <span> hello,react~ </span> </h1> ) // 2.渲染虚拟DOM到页面 ReactDOM.render(V_DOM,document.getElementById('root')) </script>其中需要注意的是，我们的script标签中，type要写成【text/babel】，我们通过babel来把JSX转换成JS。
JSX语法规则：
定义虚拟DOM，不要写引号标签中混入JS表达式时要用（）样式的类名指定不要用class，要用className内联样式，要用style={{key:value}}的形式去写只有一个要标签标签必须标签标签首字母：小写字母开头，则将标签转为html中同名元素，若html中无譔 标签对应的同名元素，则报错；大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。 二、模块与组件的理解模块:随着业务逻辑增加，代码越来越多且复杂，为了复用JS，简化JS?的编写，提高JS运行效率，向外提供特定功能的JS程序，一般就是一个JS文件。
组件：一个界面的功能更复杂，为了复用编码，简化项目编码，提高运行效率，组件用来实现局部功能效果的代码和资源的集合（html/css/js/image等等）
三、React面向组件编程面向组件编程，那就得有组件，?React给我们提供了两种方法去创建组件：函数式组件、类式组件。
函数式组件：
<script type="text/babel"> function GetName(props){ return <p>姓名:{props.name}</p> } function GetAge(props){ return <p>年龄:{props.age}</p> } function Person(props){ return( <div> <GetName name={props.name}/> <GetAge age={props.age}/> </div> ) } ReactDOM.render(<Person name='张三' age={19}/>,document.getElementById('root')) </script>类式组件：
<script type="text/babel"> // 1:react发现组件是类定义的时候 就会new出这个实例,调用里面的render方法 // 2:把里面的虚拟dom转成真实dom class Person extends React.Component{ render(){ return <p>hello,类式组件</p> } } ReactDOM.render(<Person/>,document.getElementById('root')) </script>当我们通过JSX去创建虚拟DOM，babel.js把会帮我们把JSX转换成原生JS，且开启了严格模式。在严格模式下，我们用函数式组件创建组件时，在那个组件里是没有自己的this，所以我们后面谈的【组件实例的三大核心属性】都是基于类式组件来展开说明的，但是回过头来，难道用函数式组件来创建组件就不能用state了嘛，当然不是，最新版本的React我们会用到hooks也可以让函数有三大属性。
哈哈~在这做个铺垫，今天的内容就说到这里！
拜比~
?
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #React
