一、为什么使用react?
1、react的特点
1.声明式设计 React采用声明范式,可以轻松描述应用。
2.高效 React通过对DOM的模拟,最大限度地减少与DOM的交互。
3.灵活 React可以与已知的库或框架很好地配合
4.JSX JSX是JavaScript语法的扩展,React开发不一定使用JSX,但是我们建议使用它。
5.组件 通过React构建组件,使用代码更加容易得到复用,能够很好的应用在大项目的开发中。
6.单向响应的数据流 React实现了单向响应的数据流,从而减少了代码重复,这也是它为什么比传统数据绑定更简单。
以下属于个人理解
单向数据流
在React中,数据的流向是单向的--从父节点传递到子节点,因为组件是简单而且易于把握的,他们只需从父节点获取props渲染即可,如果顶层组件的某个props
值改变了,react会递归的向下遍历整棵组件数,重新渲染所有使用这个属性的组件。
声明式设计
//声明式设计
const element1 = React.creatElement(
'div',
{className:"greeting"},
'哈哈'
)
//过程式
element2 = document.createElement 'div'
element2.className = 'greeting'
element2.innerHTML = '哈哈'
//类似于这样一种简化的结构
const element = {
type:'h1',
props:{
className:'greeting',
children:'Hello Word'
}
};
ReactDOM.render(
element1,
document.getElementById('root')
);
组件
两大特性:1、封装 2、重用
React优势
1、虚拟DOM用于性能的提升2、组件化,实现代码的重用
react的三个js核心库
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!--react的与dom相关的一些功能-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--将浏览器不支持的jsx语法转化为js语法-->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<!--react的核心库-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!--react的与dom相关的一些功能-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--将浏览器不支持的jsx语法转化为js语法-->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<!--
<script> 标签的 type 属性为 text/babel 。
这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。
凡是使用 JSX 的地方,都要加上 type="text/babel" 。
-->
<script type="text/babel">
// ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root') );
</script>
</body>
</html>
开发环境
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
生产环境
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
相比开发环境 进行了压缩和优化
JSX语法
1、语法特点
1.一个很像XML的js语法扩展
2.编写模板更加快速-简单
3.它是类型安全的,在编译的过程中就能发现错误
2、使用规则
1.可以创建一个独立的js文件来使用,通过script标签来引入
2.使用多个标签,需用div来包裹
3.支持表达式,js表达式可以直接解析
4.不支持if else 但是可以使用三元表达式
5.直接解析数组
6.标签中注释需使用{}包裹,区别于原先的js注释,否则的话,会被解析成文本
7.推荐使用内联样式,直接进行样式的绑定
3、为什么使用JSX语法
jsx语法允许html和js混写,使页面数据和样式的操作变得更加简单
遇到html标签(以<开头),就用HTML规则解析
遇到以{开头的结构,就用js规则解析
4、注意事项
React时间使用驼峰命名,而不是全部小写
通过JSX,你传递一个函数作为事件处理程序,而不是一个字符串
模板部分不能有多个根节点
在使用jsx语法的时候,要关注到js的关键字和保留字的问题
使用class属性的时候需要使用className