React简单相识

原理简化相识 

1. import React from "react"
2. import { createRoot } form "react-dom/client"
4. const element = React.createElement(
5.     'p',
6.     {id: 'hello'},
7.     'Hello World!'
8. )
10. const container = document.querySelector('#root')
11. const root = createRoot(container)
12. root.render()

复制代码

编写一个自界说的render函数，该函数接受“React元素”和对container的引用：

1. function render(reactElement, containerDOMElement) {
2.     // 创建一个DOM对象
3.     const domElement = document.createElement(reactElement.type)
5.     // 更新属性
6.     domElement.innerHTML = reactElement.children;
7.     for (const key in reactElement.props) {
8.         const value = reactElement.props[key];
9.         domElement.setAttribute(key, value);
10.     }
12.     // 添加为子节点
13.     containerDOMElement.appenChild(domElement)
15. }
17. const reactElement = {
18. type: 'a',
19. props: {
20. href: 'https://wikipedia.org/',
21. id: 'some-links',
22. 'data-num': 20,
23. },
24. children: 'Read more on Wikipedia',
25. };
27. const containerDOMElement =
28. document.querySelector('#root');
30. render(reactElement, containerDOMElement);

复制代码

 expression slots

我们可以使用大括号 ( {} ) 创建expression slots，任何放在大括号之间的内容都将被视为纯 JavaScript，而不是字符串。
JSX 在编译时并不会查抄expression solts是否有效！它只是将内容转发到纯 JS 输出，并不会做任何额外的变乱。

1. import React from "react"
2. import { render } from “react-dom”
4. const shopping_list = ["apple", "banana", "carrot"];
6. const element = (
7.     <div>
8.           Purchase: {shopping_list.length}
9.     </div>
10. )
12. const compliedElement = React.createElement(
13.     "div",
14.     {},
15.     "Purchase: "
16.     shoppingList.length
17. )
19. const root = document.querySelector("#root");
21. // render(element, root)
22. render(compliedElement, root);

复制代码

你会发现程序输出没有任何变化！
所以如果你在expression slot中做一些条件判定的语句，它会发生错误，但这错误并不是jsx不允许，而是javascript不允许。

1. import React from "react"
2. import { render } from “react-dom”
4. const shopping_list = ["apple", "banana", "carrot"];
6. const element = (
7.     <div>
8.           Purchase: {if ( shoppingList.length < 5) "Almost done!"}
9.     </div>
10. )
12. const compliedElement = React.createElement(
13.     "div",
14.     {},
15.     "Purchase: "
16.     if ( shoppingList.length < 5) "Almost done!"
17. )
19. const root = document.querySelector("#root");
21. // render(element, root)
22. render(compliedElement, root);

复制代码

很显然，我们不能将这种条件判定语句这样放在函数的参数中。
HTML与JSX的区别

JSX 看起来像 HTML，但有一些根本的区别
 关键字的保存

JavaScript 有几十个“关键字”。关键字是具有内置功能的关键字。因为它们已经做了一些变乱，所以我们不能在 JSX 中使用它们。
但有一个题目，就是 HTML 属性有时与 JavaScript 关键字重叠。

1. const element = (
2.   <div>
3.     <label for="name">
4.       Name:
5.     </label>
6.     <input
7.       id="name"
8.       class="fun-input"
9.     />
10.   </div>
11. );

复制代码

 如果我们将其编译成 JavaScript，我们会发现我们使用了两个保存字：for，class。
为相识决这个冲突，React 对这两个术语使用了细微的变化：

•        for改为    htmlFor
  
• class更改为className
  

1. const element = (
2.   <div>
3.     <label htmlFor="name">
4.       Name:
5.     </label>
6.     <input
7.       id="name"
8.       className="fun-input"
9.     />
10.   </div>
11. );

复制代码

  区分大小写的属性

  在 JSX 中，我们的属性需要是“camelCase” ,这是有效的html：

1. <video
2.   src="/videos/cat-skateboarding.mp4"
3.   autoplay="true"
4. >

复制代码

在 JSX 中，我们需要将“autoplay”中的“p”大写，因为“auto”和“play”是不同的词：

1. const element = (
2.   <video
3.     src="/videos/cat-skateboarding.mp4"
4.     autoPlay={true}
5.     //  ^ Capital “P”
6.   />
7. );

复制代码

style的应用 

html中我们可以这么写：

1. <article style="filter: var(--shadow-elevation-high)"></article>

复制代码

但在jsx中肯定是不行的，需要如下所示：

1. <article style={ { filter: "var(--shadow-elevation-high)" } }></article>

复制代码

我们需要往expression slots中传入一个对象。
   还有jsx标签必须闭合、必须小写等等。 
  空格陷阱 

1. import { createRoot } from 'react-dom/client';
3. const daysUntilSantaReturns = 123;
5. const element = (
6. <div>
7. <strong>
8. Days until Santa returns:
9. </strong>
10. {daysUntilSantaReturns}
11. </div>
12. );
14. const container = document.querySelector('#root');
15. const root = createRoot(container);
16. root.render(element);

复制代码

如上代码表现的会是：returns:123，而不是returns: 123，粗体文本和数字之间没有空格。
为什么会这样呢？
让我们思量一下这个 JSX 如何编译为 JavaScript

1. const element = React.createElement(
2.   'div',
3.   {},
4.   React.createElement(
5.     'strong',
6.     {},
7.     'Days until Santa returns:'
8.   ),
9.   daysUntilSantaReturns
10. );

复制代码

  请记住， JSX 不会编译为 HTML，它会编译为 JavaScript。当执行该 JavaScript 时，它只会创建并附加两个 HTML 节点：
  那么我们该如何解决呢？最常见的解决方案是在大括号中添加单个空白字符：

1. <div>
2.   <strong>Days until Santa returns:</strong>
3.   {' '}
4.   {daysUntilSantaReturns}
5. </div>

复制代码

然而在 HTML 中，每个空白字符（以及换行符！）都会产生一个可见的空格。例如，假设我们有 3 个并排的图像（请参见下面的代码游乐场）。默认情况下，HTML 将在它们之间使用单个空白字符来呈现它们。
   当然，它还取决于布局方式。在 Flex布局 中，浏览器将忽略所有空格和缩进，就像 JSX 编译器一样。  
 
          ran      



   

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。