首页 > 代码库 > react学习笔记-01

react学习笔记-01

2024-08-25 18:46:00   234人阅读

1. HTML模板

　　Jsx是react的语法糖，最终会被编译成js语法。因此需要第三方库browser将jsx转换成js。

　　由于react 0.14版本之后，将react和react-dom拆分，所以需要分别引入react和react-dom

　　这是官网的一个demo

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <script src="../build/react.js"></script>
 5     <script src="../build/react-dom.js"></script>
 6     <script src="../build/browser.min.js"></script>
 7   </head>
 8   <body>
 9     <div id="example"></div>
10     <script type="text/babel">
11       ReactDOM.render(
12         <h1 color>Hello, world!</h1>,
13         document.getElementById(‘example‘)
14       );
15     </script>
16   </body>
17 </html>

　　但是编译之后是这样的：

React.render( React.createElement("h1", {color: "red"}, "Hello, world!"), document.getElementById(‘example‘) );

　　render()方法里面的html代码被转换成了React.createElement.因此阔以使用React.createElement来创建模板，但不推荐。

　　React.createEleemt(type,[props],[...children]):

　　　　type:the type argument can be either a tag name string(such as "div"),or a React Compoment()

　　jsx语法规则：render方法第一个参数，首写字母如果是小写的就是HTML代码，如果是大写字母就是React组件；

　　　　　　　　jsx会主动去检查标签是否闭合，如果没有闭合，直接报错。

2.ReactDOM.render()+js

　　只需要用大括号括起来就可以使用js语法。

 1 var names = [‘Alice‘, ‘Emily‘, ‘Kate‘];
 2 
 3       ReactDOM.render(
 4         <div>
 5         {
 6           names.map(function (name) {
 7             return <div>Hello, {name}!</div>
 8           })
 9         }
10         </div>,
11         document.getElementById(‘example‘)
12       );

　　编译之后变成：

1 var names = [‘Alice‘, ‘Emily‘, ‘Kate‘];   
2 React.render(   
3   React.createElement("div", null, names.map(function (name) {  
4     return React.createElement("div", null, "Hello, ", name, "!")   
5   }) ),  
6  document.getElementById(‘example‘)  
7 );

还是三个参数，第二个arg为null，第三个参数就是js代码。所以js代码只能放一行表达式，不能有;出现。

比如这样写就是错误的：

 1 React.render(  
 2 <div>  
 3 {  
 4 var a = 1;  
 5 names.map(function (name) {  
 6 return <div>Hello, {name}!</div>  
 7 })  
 8 }  
 9 </div>,  
10 document.getElementById(‘example‘)  
11 );

3.render 数组

　　arr是个数组，jsx会把arr的所有成员都添加到模板中。只需要用{}把arr括起来，表示js代码即可。

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById(‘example‘)
);

编译后结果：

1 React.render(   
2          React.createElement("div", null, [<h1>Hello world!</h1>,<h2>React is awesome</h2>,]),  
3         document.getElementById(‘example‘)  
4        );

 

react学习笔记-01


联系
我们