react入门[js的编写]
react介绍
- 用于动态构建用户界面的javascript库
- 由facebook开源
react特点
- 声明式编码
- 组件化编码
- React Native编写原生应用
- 高效[Diffing算法]
react高效的原因
- 使用虚拟DOM,不总是直接操作页面的真实DOM
- DOM Diffing算法，最小页面重绘
react的基本使用
#### react相关js库
- react.js: react核心库
- react-dom.js: 提供操作DoM的react扩展库
- babel.min.js: 解析JSX语法代码转化为JS代码的库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello_react</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel" > /* 此处一定要写babel */
//1.创建虚拟DOM
const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById(‘test‘))
</script>
</body>
</html>
虚拟DOM的两种创建方式
-
jsx创建
const VDOM = ( <h1 id="title"> <span>Hello,React</span> </h1> ) -
js创建（不常用）
//由React提供了一些API来创建一种 “特别” 的一般js对象 const VDOM = React.createElement(‘h1‘,{id:‘title‘},React.createElement(‘span‘,{},‘Hello,React‘))
真实DOM与虚列DOM
- 虚拟DOM对象最终都会被React转化成为 真实DOM
- 编码时只需操作虚拟DOM相关的数据
Jsx语法规则
- 定义虚拟DOM时，不要写引号
- 标签中混入js表达式要用{}
- 样式的类名指定不要用class,要用className
- 内联样式，要用style={{key:value}}的形式去写
- 只能有一个根标签
-
标签首字母
- 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
- 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
react中的定义组件
- 函数式组件
<script type="text/babel">
//1.创建函数式组件
function MyComponent(){
console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById(‘test‘))
/*
执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/
</script>
-
类式组件
<script type="text/babel"> //1.创建类式组件 class MyComponent extends React.Component { render(){ //render是放在哪里的？—— MyComponent的原型对象上，供实例使用。 //render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。 console.log(‘render中的this:‘,this); return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2> } } //2.渲染组件到页面 ReactDOM.render(<MyComponent/>,document.getElementById(‘test‘)) /* 执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？ 1.React解析组件标签，找到了MyComponent组件。 2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。 3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。 */ </script>