react
- react是一个JavaScript库,解决数据不断变化的大型应用。数据变化会带来两个严重的问题：1.大量的DOM操作 2.逻辑极其复杂。react就解决了这个问题。
- react的特点 ：声明式编程（自动DOM操作）
核心是组件，组件的设计目的是提升代码的复用率，降低测试难度，降低代码复杂度。 - react的开发环境配置
a) react.js : react的核心库
b) react-dom.js : 提供操作DOM相关的功能
c) browser.js : 将使用的JSX语法转换成JvaScript语法
三者引用顺序必须是 a b c 的顺序。
新建html文档，引入三个js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react笔记</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.js"></script>
</head>
<body>
<div id="wrap"></div>
<script type="text/babel">
consoloe.log(React);
consoloe.log(ReactDOM);
</script>
</body>
</html>
- 在React中，有两个属性createElement(t,e,n)和createClass(t)。这两个属性都是创建react节点。前者使用原生js，基本上不使用;后者使用JSX语法。
- 在ReactDOM中，有一个render(e, t ,n)，将创建的组件渲染出来。
createElement属性的三个参数:
1. t : 表示创建的元素标签
2. e : 表示元素属性
3. n : 表示子节点
//使用createElement创建一个react节点
<div id="demo1"></div>
<script type="text/babel">
var oD = document.getElementById("demo1"),
HelloReact = React.createElement(
"h1",
null,
"Hello React"
);
//渲染
ReactDOM.render(HelloReact, oD);
</script>
使用createElement属性在div中插入子元素时,要注意n参数不能直接写变量,需要再使用createElement,例子如下:
<div id="demo2"></div>
<script type="text/babel">
var oD = document.getElementById("demo2");
var HelleWorld = React.createElement(
"div",
null,
React.createElement(
"h1",
{
"style" : {
"color" : "blue"
}
},
"Hello React"
)
);
//渲染
ReactDOM.render(HelloWrold, oD);
</script>
createClass属性一个参数:
1. t : {
render : function(){
renture XXXX;
}
}
//使用createClass创建一个react节点
<div id="demo3"></div>
<script type="text/babel"> //bable:支持JSX语法
var oD = document.getElementById("demo3");
//首字母必须大写HelloWrold
var HelloWorld = React.createClass({
render(){
return <div>Hello Wrold</div>
}
});
//调用组件的时候必须使用<HelloWorld />格式来写
ReactDOM.render(<HelloWrold/>, oD);
</script>
注意事项:
1. type类型 type="text/babel"
2. 变量首字母必须大写
3. 调用组件的时候必须使用<HelloWrold/>格式来写
单标签 <HelloWrold/>
双标签 <HelloWrold></HelloWrold>
4. 引用browser.js
