51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落
当前位置：工具盒子 > 开源软件 > 正文

React框架

2024-11-16 分类：开源软件 阅读(121) 评论(0)

本文主要讲解前端React相关知识。

React入门 {#react入门}

React简介 {#react简介}

官网 {#官网}

介绍描述 {#介绍描述}

  • 用于动态构建用户界面的 JavaScript 库(只关注于视图)
  • 由Facebook开源

React的特点 {#react的特点}

  1. 声明式编码
  2. 组件化编码
  3. React Native 编写原生应用
  4. 高效（优秀的Diffing算法）

React高效的原因 {#react高效的原因}

  1. 使用虚拟(virtual)DOM，不总是直接操作页面真实DOM。
  2. DOM Diffing算法，最小化页面重绘。

React的基本使用 {#react的基本使用}

相关的js库 {#相关的js库}

  1. react.js：React核心库。
  2. react-dom.js：提供操作DOM的react扩展库。
  3. 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>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt; &amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt; &lt;span class=&quot;hljs-comment&quot;&gt;/* 此处一定要写babel /&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;// 1.创建虚拟DOM&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;hljs-variable constant_&quot;&gt;VDOM&lt;/span&gt; = &lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;h1&lt;/span&gt;&amp;gt;&lt;/span&gt;Hello,React&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;h1&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;hljs-comment&quot;&gt;/ 此处一定不要写引号，因为不是字符串 */&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;// 2.渲染虚拟DOM到页面&lt;/span&gt;
&lt;span class=&quot;hljs-title class_&quot;&gt;ReactDOM&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;hljs-variable constant_&quot;&gt;VDOM&lt;/span&gt;,&lt;span class=&quot;hljs-variable language_&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;getElementById&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'test'&lt;/span&gt;))
&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

创建虚拟DOM的两种方式 {#创建虚拟dom的两种方式}

纯JS方式(一般不用)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用js创建虚拟DOM</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//1.创建虚拟DOM&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;hljs-variable constant_&quot;&gt;VDOM&lt;/span&gt; = &lt;span class=&quot;hljs-title class_&quot;&gt;React&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;createElement&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'h1'&lt;/span&gt;,{&lt;span class=&quot;hljs-attr&quot;&gt;id&lt;/span&gt;:&lt;span class=&quot;hljs-string&quot;&gt;'title'&lt;/span&gt;},&lt;span class=&quot;hljs-title class_&quot;&gt;React&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;createElement&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'span'&lt;/span&gt;,{},&lt;span class=&quot;hljs-string&quot;&gt;'Hello,React'&lt;/span&gt;))
&lt;span class=&quot;hljs-comment&quot;&gt;//2.渲染虚拟DOM到页面&lt;/span&gt;
&lt;span class=&quot;hljs-title class_&quot;&gt;ReactDOM&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;hljs-variable constant_&quot;&gt;VDOM&lt;/span&gt;,&lt;span class=&quot;hljs-variable language_&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;getElementById&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'test'&lt;/span&gt;))
&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

JSX方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用jsx创建虚拟DOM</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt; &amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt; &lt;span class=&quot;hljs-comment&quot;&gt;/* 此处一定要写babel /&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//1.创建虚拟DOM&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;hljs-variable constant_&quot;&gt;VDOM&lt;/span&gt; = (  &lt;span class=&quot;hljs-comment&quot;&gt;/ 此处一定不要写引号，因为不是字符串 */&lt;/span&gt;
&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;h1&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;id&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;title&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;span&lt;/span&gt;&amp;gt;&lt;/span&gt;Hello,React&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;span&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;h1&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
)
&lt;span class=&quot;hljs-comment&quot;&gt;//2.渲染虚拟DOM到页面&lt;/span&gt;
&lt;span class=&quot;hljs-title class_&quot;&gt;ReactDOM&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;hljs-variable constant_&quot;&gt;VDOM&lt;/span&gt;,&lt;span class=&quot;hljs-variable language_&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;getElementById&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'test'&lt;/span&gt;))
&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

虚拟DOM与真实DOM {#虚拟dom与真实dom}

  1. 虚拟DOM对象最终都会被React转换为真实的DOM
  2. 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM随着变化而更新。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>虚拟DOM与真实DOM</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>
	<div id="demo"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt; &amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt; &lt;span class=&quot;hljs-comment&quot;&gt;/* 此处一定要写babel /&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//1.创建虚拟DOM&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;hljs-variable constant_&quot;&gt;VDOM&lt;/span&gt; = (  &lt;span class=&quot;hljs-comment&quot;&gt;/ 此处一定不要写引号，因为不是字符串 */&lt;/span&gt;
&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;h1&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;id&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;title&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;span&lt;/span&gt;&amp;gt;&lt;/span&gt;Hello,React&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;span&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;h1&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
)
&lt;span class=&quot;hljs-comment&quot;&gt;//2.渲染虚拟DOM到页面&lt;/span&gt;
&lt;span class=&quot;hljs-title class_&quot;&gt;ReactDOM&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;hljs-variable constant_&quot;&gt;VDOM&lt;/span&gt;,&lt;span class=&quot;hljs-variable language_&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;getElementById&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'test'&lt;/span&gt;))


&amp;lt;span class=&amp;quot;hljs-keyword&amp;quot;&amp;gt;const&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-variable constant_&amp;quot;&amp;gt;TDOM&amp;lt;/span&amp;gt; = &amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;document&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;getElementById&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'demo'&amp;lt;/span&amp;gt;)
&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;console&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;log&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'虚拟DOM'&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable constant_&amp;quot;&amp;gt;VDOM&amp;lt;/span&amp;gt;);
&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;console&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;log&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'真实DOM'&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable constant_&amp;quot;&amp;gt;TDOM&amp;lt;/span&amp;gt;);
&amp;lt;span class=&amp;quot;hljs-keyword&amp;quot;&amp;gt;debugger&amp;lt;/span&amp;gt;;
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;// console.log(typeof VDOM);&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;// console.log(VDOM instanceof Object);&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;/* 
		关于虚拟DOM：
			1.本质是Object类型的对象（一般对象）
			2.虚拟DOM比较&amp;quot;轻&amp;quot;，真实DOM比较&amp;quot;重&amp;quot;，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
			3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
 */&amp;lt;/span&amp;gt;



&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

React JSX {#react-jsx}

JSX {#jsx}

全称: JavaScript XML

react定义的一种类似于XML的JS扩展语法：

本质是React.createElement(component,props,children)方法的语法糖

babel.js的作用 {#babeljs的作用}

浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行

只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

渲染虚拟DOM（元素） {#渲染虚拟dom元素}

  • 语法：ReactDOM.render(virtualDOM,containerDOM)
  • 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
  • 参数说明
    • 参数一: 纯js或jsx创建的虚拟dom对象
    • 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsx语法规则</title>
	<style>
		.title{
			background-color: orange;
			width: 200px;
		}
	</style>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt; &amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; myId = &lt;span class=&quot;hljs-string&quot;&gt;'LijInG'&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; myData = &lt;span class=&quot;hljs-string&quot;&gt;'HeLlo,rEaCt'&lt;/span&gt;


&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//1.创建虚拟DOM&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-keyword&amp;quot;&amp;gt;const&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-variable constant_&amp;quot;&amp;gt;VDOM&amp;lt;/span&amp;gt; = (
	&amp;lt;span class=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;div&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
		&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;h2&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;className&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;&amp;quot;title&amp;quot;&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;id&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;{myId.toLowerCase()}&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
			&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;span&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;style&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;{{color:&amp;lt;/span&amp;gt;'&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;white&amp;lt;/span&amp;gt;',&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;fontSize:&amp;lt;/span&amp;gt;'&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;29px&amp;lt;/span&amp;gt;'}}&amp;amp;gt;&amp;lt;/span&amp;gt;{myData.toLowerCase()}&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;span&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
		&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;h2&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
		&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;h2&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;className&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;&amp;quot;title&amp;quot;&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;id&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;{myId.toUpperCase()}&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
			&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;span&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;style&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;{{color:&amp;lt;/span&amp;gt;'&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;white&amp;lt;/span&amp;gt;',&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;fontSize:&amp;lt;/span&amp;gt;'&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;29px&amp;lt;/span&amp;gt;'}}&amp;amp;gt;&amp;lt;/span&amp;gt;{myData.toLowerCase()}&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;span&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
		&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;h2&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
		&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;input&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;type&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;&amp;quot;text&amp;quot;&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;
	&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;div&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;
)
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//2.渲染虚拟DOM到页面&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;ReactDOM&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;render&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-variable constant_&amp;quot;&amp;gt;VDOM&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;document&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;getElementById&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'test'&amp;lt;/span&amp;gt;))

&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;/*
jsx语法规则：
1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class，要用className。
4.内联样式，要用style={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。


*/&amp;lt;/span&amp;gt;



&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

JSX练习 {#jsx练习}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsx小练习</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt; &amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;/*
一定注意区分：【js语句(代码)】与【js表达式】
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}
2.语句(代码)：
下面这些都是语句(代码)：
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}


*/&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//模拟一些数据&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; data = [&lt;span class=&quot;hljs-string&quot;&gt;'Angular'&lt;/span&gt;,&lt;span class=&quot;hljs-string&quot;&gt;'React'&lt;/span&gt;,&lt;span class=&quot;hljs-string&quot;&gt;'Vue'&lt;/span&gt;]
&lt;span class=&quot;hljs-comment&quot;&gt;//1.创建虚拟DOM&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;hljs-variable constant_&quot;&gt;VDOM&lt;/span&gt; = (
&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;h1&lt;/span&gt;&amp;gt;&lt;/span&gt;前端js框架列表&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;h1&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;ul&lt;/span&gt;&amp;gt;&lt;/span&gt;
{
data.map((item,index)=&amp;gt;{
return &lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;key&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{index}&lt;/span&gt;&amp;gt;&lt;/span&gt;{item}&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;
})
}
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;ul&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
)
&lt;span class=&quot;hljs-comment&quot;&gt;//2.渲染虚拟DOM到页面&lt;/span&gt;
&lt;span class=&quot;hljs-title class_&quot;&gt;ReactDOM&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;hljs-variable constant_&quot;&gt;VDOM&lt;/span&gt;,&lt;span class=&quot;hljs-variable language_&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;getElementById&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'test'&lt;/span&gt;))
&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

模块与组件、模块化与组件化的理解 {#模块与组件模块化与组件化的理解}

模块 {#模块}

  • **理解：**向外提供特定功能的js程序, 一般就是一个js文件
  • **为什么要拆成模块：**随着业务逻辑增加，代码越来越多且复杂
  • **作用：**复用js, 简化js的编写, 提高js运行效率

组件 {#组件}

  • **理解：**用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
  • 为什么要用组件： 一个界面的功能更复杂
  • **作用：**复用编码, 简化项目编码, 提高运行效率

模块化 {#模块化}

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化 {#组件化}

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

React面向组件编程 {#react面向组件编程}

基本理解和使用 {#基本理解和使用}

使用React开发者工具调试 {#使用react开发者工具调试}

下载 react_dev_tools 谷歌浏览器插件：https://share.weiyun.com/90Vjmvt6

函数式组件 {#函数式组件}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1_函数式组件</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//1.创建函数式组件&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;hljs-title function_&quot;&gt;MyComponent&lt;/span&gt;(&lt;span class=&quot;hljs-params&quot;&gt;&lt;/span&gt;){
&lt;span class=&quot;hljs-variable language_&quot;&gt;console&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;log&lt;/span&gt;(&lt;span class=&quot;hljs-variable language_&quot;&gt;this&lt;/span&gt;); &lt;span class=&quot;hljs-comment&quot;&gt;//此处的this是undefined，因为babel编译后开启了严格模式&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;h2&lt;/span&gt;&amp;gt;&lt;/span&gt;我是用函数定义的组件(适用于【简单组件】的定义)&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;h2&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
}
&lt;span class=&quot;hljs-comment&quot;&gt;//2.渲染组件到页面&lt;/span&gt;
&lt;span class=&quot;hljs-title class_&quot;&gt;ReactDOM&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;MyComponent&lt;/span&gt;/&amp;gt;&lt;/span&gt;&lt;/span&gt;,&lt;span class=&quot;hljs-variable language_&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;getElementById&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'test'&lt;/span&gt;))
&lt;span class=&quot;hljs-comment&quot;&gt;/*
执行了ReactDOM.render(&amp;lt;MyComponent/&amp;gt;.......之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

类式组件 {#类式组件}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_类式组件</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//1.创建类式组件&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;hljs-title class_&quot;&gt;MyComponent&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;hljs-title class_ inherited__&quot;&gt;React.Component&lt;/span&gt; {
&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;hljs-params&quot;&gt;&lt;/span&gt;){
&lt;span class=&quot;hljs-comment&quot;&gt;//render是放在哪里的？------ MyComponent的原型对象上，供实例使用。&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//render中的this是谁？------ MyComponent的实例对象 &amp;lt;=&amp;gt; MyComponent组件实例对象。&lt;/span&gt;
&lt;span class=&quot;hljs-variable language_&quot;&gt;console&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;log&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'render中的this:'&lt;/span&gt;,&lt;span class=&quot;hljs-variable language_&quot;&gt;this&lt;/span&gt;);
&lt;span class=&quot;hljs-keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;h2&lt;/span&gt;&amp;gt;&lt;/span&gt;我是用类定义的组件(适用于【复杂组件】的定义)&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;h2&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
}
}
&lt;span class=&quot;hljs-comment&quot;&gt;//2.渲染组件到页面&lt;/span&gt;
&lt;span class=&quot;hljs-title class_&quot;&gt;ReactDOM&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;MyComponent&lt;/span&gt;/&amp;gt;&lt;/span&gt;&lt;/span&gt;,&lt;span class=&quot;hljs-variable language_&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;getElementById&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'test'&lt;/span&gt;))
&lt;span class=&quot;hljs-comment&quot;&gt;/*
执行了ReactDOM.render(&amp;lt;MyComponent/&amp;gt;.......之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

注意 {#注意}

  • 组件名必须首字母大写
  • 虚拟DOM元素只能有一个根元素
  • 虚拟DOM元素必须有结束标签

组件三大核心属性之state {#组件三大核心属性之state}

理解 {#理解}

  1. state是组件对象最重要的属性，值是对象(可以包含多个key-value的组合)
  2. 组件被称为"状态机"，通过更新组件的state来更新对应的页面显示(重新渲染组件)

强烈注意 {#强烈注意}

  • 组件中render方法中的this为组件实例对象

  • 组件自定义的方法中this为undefined，如何解决？

    • a) 强制绑定this: 通过函数对象的bind()
    • b) 箭头函数

  • 状态数据，不能直接修改或更新

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>state</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//1.创建组件&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;hljs-title class_&quot;&gt;Weather&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;hljs-title class_ inherited__&quot;&gt;React.Component&lt;/span&gt;{


	&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//构造器调用几次？ ------------ 1次&amp;lt;/span&amp;gt;
	&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;constructor&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-params&amp;quot;&amp;gt;props&amp;lt;/span&amp;gt;){
		&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;console&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;log&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'constructor'&amp;lt;/span&amp;gt;);
		&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;super&amp;lt;/span&amp;gt;(props)
		&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//初始化状态&amp;lt;/span&amp;gt;
		&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;this&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-property&amp;quot;&amp;gt;state&amp;lt;/span&amp;gt; = {&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;isHot&amp;lt;/span&amp;gt;:&amp;lt;span class=&amp;quot;hljs-literal&amp;quot;&amp;gt;false&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;wind&amp;lt;/span&amp;gt;:&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'微风'&amp;lt;/span&amp;gt;}
		&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//解决changeWeather中this指向问题&amp;lt;/span&amp;gt;
		&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;this&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-property&amp;quot;&amp;gt;changeWeather&amp;lt;/span&amp;gt; = &amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;this&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-property&amp;quot;&amp;gt;changeWeather&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;bind&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;this&amp;lt;/span&amp;gt;)
	}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//render调用几次？ ------------ 1+n次 1是初始化的那次 n是状态更新的次数&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;render&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'render'&amp;amp;lt;/span&amp;amp;gt;);
	&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//读取状态&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;const&amp;amp;lt;/span&amp;amp;gt; {isHot,wind} = &amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;state&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;xml&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;h1&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onClick&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.changeWeather}&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;今天天气很{isHot ? '炎热' : '凉爽'}，{wind}&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;h1&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//changeWeather调用几次？ ------------ 点几次调几次&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;changeWeather&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//changeWeather放在哪里？ ------------ Weather的原型对象上，供实例使用&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined&amp;amp;lt;/span&amp;amp;gt;
	
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'changeWeather'&amp;amp;lt;/span&amp;amp;gt;);
	&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//获取原来的isHot值&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;const&amp;amp;lt;/span&amp;amp;gt; isHot = &amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;state&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;isHot&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;setState&amp;amp;lt;/span&amp;amp;gt;({&amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;isHot&amp;amp;lt;/span&amp;amp;gt;:!isHot})
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;);

	&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//this.state.isHot = !isHot //这是错误的写法&amp;amp;lt;/span&amp;amp;gt;
}



}
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//2.渲染组件到页面&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;ReactDOM&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;render&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;Weather&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;document&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;getElementById&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'test'&amp;lt;/span&amp;gt;))



&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

简写：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>state简写方式</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//1.创建组件&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;hljs-title class_&quot;&gt;Weather&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;hljs-title class_ inherited__&quot;&gt;React.Component&lt;/span&gt;{
&lt;span class=&quot;hljs-comment&quot;&gt;//初始化状态&lt;/span&gt;
state = {&lt;span class=&quot;hljs-attr&quot;&gt;isHot&lt;/span&gt;:&lt;span class=&quot;hljs-literal&quot;&gt;false&lt;/span&gt;,&lt;span class=&quot;hljs-attr&quot;&gt;wind&lt;/span&gt;:&lt;span class=&quot;hljs-string&quot;&gt;'微风'&lt;/span&gt;}


	&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;render&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-params&amp;quot;&amp;gt;&amp;lt;/span&amp;gt;){
		&amp;lt;span class=&amp;quot;hljs-keyword&amp;quot;&amp;gt;const&amp;lt;/span&amp;gt; {isHot,wind} = &amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;this&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-property&amp;quot;&amp;gt;state&amp;lt;/span&amp;gt;
		&amp;lt;span class=&amp;quot;hljs-keyword&amp;quot;&amp;gt;return&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;h1&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;onClick&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;{this.changeWeather}&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;今天天气很{isHot ? '炎热' : '凉爽'}，{wind}&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;h1&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;
	}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//自定义方法------------要用赋值语句的形式+箭头函数，this自动找到外层实例，这里的外层就是Weather实例&amp;amp;lt;/span&amp;amp;gt;
changeWeather = &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;()=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;const&amp;amp;lt;/span&amp;amp;gt; isHot = &amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;state&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;isHot&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;setState&amp;amp;lt;/span&amp;amp;gt;({&amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;isHot&amp;amp;lt;/span&amp;amp;gt;:!isHot})
}



}
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//2.渲染组件到页面&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;ReactDOM&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;render&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;Weather&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;document&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;getElementById&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'test'&amp;lt;/span&amp;gt;))



&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

组件三大核心属性之props {#组件三大核心属性之props}

理解 {#理解-1}

  1. 每个组件对象都会有props(properties的简写)属性
  2. 组件标签的所有属性都保存在props中

作用 {#作用}

  • 通过标签属性从组件外向组件内传递变化的数据
  • 注意: 组件内部不要修改props数据

编码操作 {#编码操作}

props基本使用：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>props基本使用</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test1"></div>
	<div id="test2"></div>
	<div id="test3"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//创建组件&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;hljs-title class_&quot;&gt;Person&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;hljs-title class_ inherited__&quot;&gt;React.Component&lt;/span&gt;{
&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;hljs-params&quot;&gt;&lt;/span&gt;){
&lt;span class=&quot;hljs-comment&quot;&gt;// console.log(this);&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; {name,age,sex} = &lt;span class=&quot;hljs-variable language_&quot;&gt;this&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;props&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;return&lt;/span&gt; (
&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;ul&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;姓名：{name}&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;性别：{sex}&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;年龄：{age+1}&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;ul&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
)
}
}
&lt;span class=&quot;hljs-comment&quot;&gt;//渲染组件到页面&lt;/span&gt;
&lt;span class=&quot;hljs-title class_&quot;&gt;ReactDOM&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;Person&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;name&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;jerry&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;age&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{19}&lt;/span&gt;  &lt;span class=&quot;hljs-attr&quot;&gt;sex&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;男&quot;&lt;/span&gt;/&amp;gt;&lt;/span&gt;&lt;/span&gt;,&lt;span class=&quot;hljs-variable language_&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;getElementById&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'test1'&lt;/span&gt;))
&lt;span class=&quot;hljs-title class_&quot;&gt;ReactDOM&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;Person&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;name&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;tom&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;age&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{18}&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;sex&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;女&quot;&lt;/span&gt;/&amp;gt;&lt;/span&gt;&lt;/span&gt;,&lt;span class=&quot;hljs-variable language_&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;getElementById&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'test2'&lt;/span&gt;))


&amp;lt;span class=&amp;quot;hljs-keyword&amp;quot;&amp;gt;const&amp;lt;/span&amp;gt; p = {&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;name&amp;lt;/span&amp;gt;:&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'老刘'&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;age&amp;lt;/span&amp;gt;:&amp;lt;span class=&amp;quot;hljs-number&amp;quot;&amp;gt;18&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;sex&amp;lt;/span&amp;gt;:&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'女'&amp;lt;/span&amp;gt;}
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;// console.log('@',...p);&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;// ReactDOM.render(&amp;amp;lt;Person name={p.name} age={p.age} sex={p.sex}/&amp;amp;gt;,document.getElementById('test3'))&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;// ...p 表示将p的所有属性通过props传递&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;ReactDOM&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;render&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;Person&amp;lt;/span&amp;gt; {&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;...p&amp;lt;/span&amp;gt;}/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;document&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;getElementById&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'test3'&amp;lt;/span&amp;gt;))



&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

对props进行限制：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>对props进行限制</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test1"></div>
	<div id="test2"></div>
	<div id="test3"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入prop-types，用于对组件标签属性进行限制 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/prop-types.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//创建组件&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;hljs-title class_&quot;&gt;Person&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;hljs-title class_ inherited__&quot;&gt;React.Component&lt;/span&gt;{
&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;hljs-params&quot;&gt;&lt;/span&gt;){
&lt;span class=&quot;hljs-comment&quot;&gt;// console.log(this);&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; {name,age,sex} = &lt;span class=&quot;hljs-variable language_&quot;&gt;this&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;props&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//props是只读的&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//this.props.name = 'jack' //此行代码会报错，因为props是只读的&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;return&lt;/span&gt; (
&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;ul&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;姓名：{name}&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;性别：{sex}&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;年龄：{age+1}&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;ul&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
)
}
}
&lt;span class=&quot;hljs-comment&quot;&gt;//对标签属性进行类型、必要性的限制&lt;/span&gt;
&lt;span class=&quot;hljs-title class_&quot;&gt;Person&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;propTypes&lt;/span&gt; = {
&lt;span class=&quot;hljs-attr&quot;&gt;name&lt;/span&gt;:&lt;span class=&quot;hljs-title class_&quot;&gt;PropTypes&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;string&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;isRequired&lt;/span&gt;, &lt;span class=&quot;hljs-comment&quot;&gt;//限制name必传，且为字符串&lt;/span&gt;
&lt;span class=&quot;hljs-attr&quot;&gt;sex&lt;/span&gt;:&lt;span class=&quot;hljs-title class_&quot;&gt;PropTypes&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;string&lt;/span&gt;,&lt;span class=&quot;hljs-comment&quot;&gt;//限制sex为字符串&lt;/span&gt;
&lt;span class=&quot;hljs-attr&quot;&gt;age&lt;/span&gt;:&lt;span class=&quot;hljs-title class_&quot;&gt;PropTypes&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;number&lt;/span&gt;,&lt;span class=&quot;hljs-comment&quot;&gt;//限制age为数值&lt;/span&gt;
&lt;span class=&quot;hljs-attr&quot;&gt;speak&lt;/span&gt;:&lt;span class=&quot;hljs-title class_&quot;&gt;PropTypes&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;func&lt;/span&gt;,&lt;span class=&quot;hljs-comment&quot;&gt;//限制speak为函数&lt;/span&gt;
}
&lt;span class=&quot;hljs-comment&quot;&gt;//指定默认标签属性值&lt;/span&gt;
&lt;span class=&quot;hljs-title class_&quot;&gt;Person&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;defaultProps&lt;/span&gt; = {
&lt;span class=&quot;hljs-attr&quot;&gt;sex&lt;/span&gt;:&lt;span class=&quot;hljs-string&quot;&gt;'男'&lt;/span&gt;,&lt;span class=&quot;hljs-comment&quot;&gt;//sex默认值为男&lt;/span&gt;
&lt;span class=&quot;hljs-attr&quot;&gt;age&lt;/span&gt;:&lt;span class=&quot;hljs-number&quot;&gt;18&lt;/span&gt; &lt;span class=&quot;hljs-comment&quot;&gt;//age默认值为18&lt;/span&gt;
}
&lt;span class=&quot;hljs-comment&quot;&gt;//渲染组件到页面&lt;/span&gt;
&lt;span class=&quot;hljs-title class_&quot;&gt;ReactDOM&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;Person&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;name&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{100}&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;speak&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{speak}/&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;,&lt;span class=&quot;hljs-variable language_&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;getElementById&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'test1'&lt;/span&gt;))
&lt;span class=&quot;hljs-title class_&quot;&gt;ReactDOM&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;Person&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;name&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;tom&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;age&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{18}&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;sex&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;女&quot;&lt;/span&gt;/&amp;gt;&lt;/span&gt;&lt;/span&gt;,&lt;span class=&quot;hljs-variable language_&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;getElementById&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'test2'&lt;/span&gt;))


&amp;lt;span class=&amp;quot;hljs-keyword&amp;quot;&amp;gt;const&amp;lt;/span&amp;gt; p = {&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;name&amp;lt;/span&amp;gt;:&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'老刘'&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;age&amp;lt;/span&amp;gt;:&amp;lt;span class=&amp;quot;hljs-number&amp;quot;&amp;gt;18&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;sex&amp;lt;/span&amp;gt;:&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'女'&amp;lt;/span&amp;gt;}
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;// console.log('@',...p);&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;// ReactDOM.render(&amp;amp;lt;Person name={p.name} age={p.age} sex={p.sex}/&amp;amp;gt;,document.getElementById('test3'))&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;// ...p 表示将p的所有属性通过props传递&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;ReactDOM&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;render&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;Person&amp;lt;/span&amp;gt; {&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;...p&amp;lt;/span&amp;gt;}/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;document&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;getElementById&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'test3'&amp;lt;/span&amp;gt;))

&amp;lt;span class=&amp;quot;hljs-keyword&amp;quot;&amp;gt;function&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;speak&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-params&amp;quot;&amp;gt;&amp;lt;/span&amp;gt;){
&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;console&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;log&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'我说话了'&amp;lt;/span&amp;gt;);
}



&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

props简写方式：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>props简写</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test1"></div>
	<div id="test2"></div>
	<div id="test3"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入prop-types，用于对组件标签属性进行限制 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/prop-types.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//创建组件&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;hljs-title class_&quot;&gt;Person&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;hljs-title class_ inherited__&quot;&gt;React.Component&lt;/span&gt;{


	&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;constructor&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-params&amp;quot;&amp;gt;props&amp;lt;/span&amp;gt;){
		&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props&amp;lt;/span&amp;gt;
		&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;// console.log(props);&amp;lt;/span&amp;gt;
		&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;super&amp;lt;/span&amp;gt;(props)
		&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;console&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;log&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'constructor'&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;this&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-property&amp;quot;&amp;gt;props&amp;lt;/span&amp;gt;);
	}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//对标签属性进行类型、必要性的限制&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;static&amp;amp;lt;/span&amp;amp;gt; propTypes = {
	&amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;name&amp;amp;lt;/span&amp;amp;gt;:&amp;amp;lt;span class=&amp;amp;quot;hljs-title class_&amp;amp;quot;&amp;amp;gt;PropTypes&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;string&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;isRequired&amp;amp;lt;/span&amp;amp;gt;, &amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//限制name必传，且为字符串&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;sex&amp;amp;lt;/span&amp;amp;gt;:&amp;amp;lt;span class=&amp;amp;quot;hljs-title class_&amp;amp;quot;&amp;amp;gt;PropTypes&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;string&amp;amp;lt;/span&amp;amp;gt;,&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//限制sex为字符串&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;age&amp;amp;lt;/span&amp;amp;gt;:&amp;amp;lt;span class=&amp;amp;quot;hljs-title class_&amp;amp;quot;&amp;amp;gt;PropTypes&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;number&amp;amp;lt;/span&amp;amp;gt;,&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//限制age为数值&amp;amp;lt;/span&amp;amp;gt;
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//指定默认标签属性值&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;static&amp;amp;lt;/span&amp;amp;gt; defaultProps = {
	&amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;sex&amp;amp;lt;/span&amp;amp;gt;:&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'男'&amp;amp;lt;/span&amp;amp;gt;,&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//sex默认值为男&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;age&amp;amp;lt;/span&amp;amp;gt;:&amp;amp;lt;span class=&amp;amp;quot;hljs-number&amp;amp;quot;&amp;amp;gt;18&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//age默认值为18&amp;amp;lt;/span&amp;amp;gt;
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;render&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;// console.log(this);&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;const&amp;amp;lt;/span&amp;amp;gt; {name,age,sex} = &amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;props&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//props是只读的&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//this.props.name = 'jack' //此行代码会报错，因为props是只读的&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt; (
		&amp;amp;lt;span class=&amp;amp;quot;xml&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;ul&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;li&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;姓名：{name}&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;li&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;li&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;性别：{sex}&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;li&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;li&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;年龄：{age+1}&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;li&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;ul&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
	)
}



}


&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//渲染组件到页面&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;ReactDOM&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;render&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;Person&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;name&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;&amp;quot;jerry&amp;quot;&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;document&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;getElementById&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'test1'&amp;lt;/span&amp;gt;))



&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

函数式组件使用props：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>函数式组件使用props</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test1"></div>
	<div id="test2"></div>
	<div id="test3"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入prop-types，用于对组件标签属性进行限制 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/prop-types.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//创建组件&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;hljs-title function_&quot;&gt;Person&lt;/span&gt; (props){
&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; {name,age,sex} = props
&lt;span class=&quot;hljs-keyword&quot;&gt;return&lt;/span&gt; (
&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;ul&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;姓名：{name}&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;性别：{sex}&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;年龄：{age}&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;ul&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
)
}
&lt;span class=&quot;hljs-title class_&quot;&gt;Person&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;propTypes&lt;/span&gt; = {
&lt;span class=&quot;hljs-attr&quot;&gt;name&lt;/span&gt;:&lt;span class=&quot;hljs-title class_&quot;&gt;PropTypes&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;string&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;isRequired&lt;/span&gt;, &lt;span class=&quot;hljs-comment&quot;&gt;//限制name必传，且为字符串&lt;/span&gt;
&lt;span class=&quot;hljs-attr&quot;&gt;sex&lt;/span&gt;:&lt;span class=&quot;hljs-title class_&quot;&gt;PropTypes&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;string&lt;/span&gt;,&lt;span class=&quot;hljs-comment&quot;&gt;//限制sex为字符串&lt;/span&gt;
&lt;span class=&quot;hljs-attr&quot;&gt;age&lt;/span&gt;:&lt;span class=&quot;hljs-title class_&quot;&gt;PropTypes&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;number&lt;/span&gt;,&lt;span class=&quot;hljs-comment&quot;&gt;//限制age为数值&lt;/span&gt;
}


&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//指定默认标签属性值&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;Person&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-property&amp;quot;&amp;gt;defaultProps&amp;lt;/span&amp;gt; = {
	&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;sex&amp;lt;/span&amp;gt;:&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'男'&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//sex默认值为男&amp;lt;/span&amp;gt;
	&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;age&amp;lt;/span&amp;gt;:&amp;lt;span class=&amp;quot;hljs-number&amp;quot;&amp;gt;18&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//age默认值为18&amp;lt;/span&amp;gt;
}
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//渲染组件到页面&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;ReactDOM&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;render&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;Person&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;name&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;&amp;quot;jerry&amp;quot;&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;document&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;getElementById&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'test1'&amp;lt;/span&amp;gt;))



&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

组件三大核心属性之refs {#组件三大核心属性之refs}

理解 {#理解-2}

组件内的标签可以定义ref属性来标识自己

编码 {#编码}

字符串形式的ref：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1_字符串形式的ref</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//创建组件&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;hljs-title class_&quot;&gt;Demo&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;hljs-title class_ inherited__&quot;&gt;React.Component&lt;/span&gt;{
&lt;span class=&quot;hljs-comment&quot;&gt;//展示左侧输入框的数据&lt;/span&gt;
showData = &lt;span class=&quot;hljs-function&quot;&gt;()=&amp;gt;&lt;/span&gt;{
&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; {input1} = &lt;span class=&quot;hljs-variable language_&quot;&gt;this&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;refs&lt;/span&gt;
&lt;span class=&quot;hljs-title function_&quot;&gt;alert&lt;/span&gt;(input1.&lt;span class=&quot;hljs-property&quot;&gt;value&lt;/span&gt;)
}
&lt;span class=&quot;hljs-comment&quot;&gt;//展示右侧输入框的数据&lt;/span&gt;
showData2 = &lt;span class=&quot;hljs-function&quot;&gt;()=&amp;gt;&lt;/span&gt;{
&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; {input2} = &lt;span class=&quot;hljs-variable language_&quot;&gt;this&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;refs&lt;/span&gt;
&lt;span class=&quot;hljs-title function_&quot;&gt;alert&lt;/span&gt;(input2.&lt;span class=&quot;hljs-property&quot;&gt;value&lt;/span&gt;)
}
&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;hljs-params&quot;&gt;&lt;/span&gt;){
&lt;span class=&quot;hljs-keyword&quot;&gt;return&lt;/span&gt;(
&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;ref&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;input1&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;placeholder&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;点击按钮提示数据&quot;&lt;/span&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-symbol&quot;&gt;&amp;amp;nbsp;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;onClick&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{this.showData}&lt;/span&gt;&amp;gt;&lt;/span&gt;点我提示左侧的数据&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-symbol&quot;&gt;&amp;amp;nbsp;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;ref&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;input2&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;onBlur&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{this.showData2}&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;placeholder&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;失去焦点提示数据&quot;&lt;/span&gt;/&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
)
}
}
&lt;span class=&quot;hljs-comment&quot;&gt;//渲染组件到页面&lt;/span&gt;
&lt;span class=&quot;hljs-title class_&quot;&gt;ReactDOM&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;Demo&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;a&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;1&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;b&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;2&quot;&lt;/span&gt;/&amp;gt;&lt;/span&gt;&lt;/span&gt;,&lt;span class=&quot;hljs-variable language_&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;getElementById&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'test'&lt;/span&gt;))
&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

回调函数形式的ref：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_回调函数形式的ref</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//创建组件&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;hljs-title class_&quot;&gt;Demo&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;hljs-title class_ inherited__&quot;&gt;React.Component&lt;/span&gt;{
&lt;span class=&quot;hljs-comment&quot;&gt;//展示左侧输入框的数据&lt;/span&gt;
showData = &lt;span class=&quot;hljs-function&quot;&gt;()=&amp;gt;&lt;/span&gt;{
&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; {input1} = &lt;span class=&quot;hljs-variable language_&quot;&gt;this&lt;/span&gt;
&lt;span class=&quot;hljs-title function_&quot;&gt;alert&lt;/span&gt;(input1.&lt;span class=&quot;hljs-property&quot;&gt;value&lt;/span&gt;)
}
&lt;span class=&quot;hljs-comment&quot;&gt;//展示右侧输入框的数据&lt;/span&gt;
showData2 = &lt;span class=&quot;hljs-function&quot;&gt;()=&amp;gt;&lt;/span&gt;{
&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; {input2} = &lt;span class=&quot;hljs-variable language_&quot;&gt;this&lt;/span&gt;
&lt;span class=&quot;hljs-title function_&quot;&gt;alert&lt;/span&gt;(input2.&lt;span class=&quot;hljs-property&quot;&gt;value&lt;/span&gt;)
}
&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;hljs-params&quot;&gt;&lt;/span&gt;){
&lt;span class=&quot;hljs-keyword&quot;&gt;return&lt;/span&gt;(
&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;ref&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{c&lt;/span&gt; =&amp;gt;&lt;/span&gt; this.input1 = c } type=&quot;text&quot; placeholder=&quot;点击按钮提示数据&quot;/&amp;gt;&lt;span class=&quot;hljs-symbol&quot;&gt;&amp;amp;nbsp;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;onClick&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{this.showData}&lt;/span&gt;&amp;gt;&lt;/span&gt;点我提示左侧的数据&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-symbol&quot;&gt;&amp;amp;nbsp;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;onBlur&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{this.showData2}&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;ref&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{c&lt;/span&gt; =&amp;gt;&lt;/span&gt; this.input2 = c } type=&quot;text&quot; placeholder=&quot;失去焦点提示数据&quot;/&amp;gt;&lt;span class=&quot;hljs-symbol&quot;&gt;&amp;amp;nbsp;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
)
}
}
&lt;span class=&quot;hljs-comment&quot;&gt;//渲染组件到页面&lt;/span&gt;
&lt;span class=&quot;hljs-title class_&quot;&gt;ReactDOM&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;Demo&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;a&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;1&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;b&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;2&quot;&lt;/span&gt;/&amp;gt;&lt;/span&gt;&lt;/span&gt;,&lt;span class=&quot;hljs-variable language_&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;getElementById&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'test'&lt;/span&gt;))
&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

回调ref中回调执行次数的问题：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3_回调ref中回调执行次数的问题</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//创建组件&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;hljs-title class_&quot;&gt;Demo&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;hljs-title class_ inherited__&quot;&gt;React.Component&lt;/span&gt;{


	state = {&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;isHot&amp;lt;/span&amp;gt;:&amp;lt;span class=&amp;quot;hljs-literal&amp;quot;&amp;gt;false&amp;lt;/span&amp;gt;}

showInfo = &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;()=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;const&amp;amp;lt;/span&amp;amp;gt; {input1} = &amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;alert&amp;amp;lt;/span&amp;amp;gt;(input1.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;value&amp;amp;lt;/span&amp;amp;gt;)
}

changeWeather = &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;()=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
	&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//获取原来的状态&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;const&amp;amp;lt;/span&amp;amp;gt; {isHot} = &amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;state&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//更新状态&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;setState&amp;amp;lt;/span&amp;amp;gt;({&amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;isHot&amp;amp;lt;/span&amp;amp;gt;:!isHot})
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;// 这里的c是节点&amp;amp;lt;/span&amp;amp;gt;
saveInput = &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;c&amp;amp;lt;/span&amp;amp;gt;)=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;input1&amp;amp;lt;/span&amp;amp;gt; = c;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'@'&amp;amp;lt;/span&amp;amp;gt;,c);
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;render&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;const&amp;amp;lt;/span&amp;amp;gt; {isHot} = &amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;state&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt;(
		&amp;amp;lt;span class=&amp;amp;quot;xml&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;h2&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;今天天气很{isHot ? '炎热':'凉爽'}&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;h2&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			{/*&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;input&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;ref&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{(c)&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{this.input1 = c;console.log('@',c);}} type=&amp;amp;quot;text&amp;amp;quot;/&amp;amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;br&amp;amp;lt;/span&amp;amp;gt;/&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;br&amp;amp;lt;/span&amp;amp;gt;/&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;*/}
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;input&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;ref&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.saveInput}&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;type&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;text&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt;/&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;br&amp;amp;lt;/span&amp;amp;gt;/&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;br&amp;amp;lt;/span&amp;amp;gt;/&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onClick&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.showInfo}&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;点我提示输入的数据&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onClick&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.changeWeather}&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;点我切换天气&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
	)
}



}
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//渲染组件到页面&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;ReactDOM&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;render&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;Demo&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;document&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;getElementById&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'test'&amp;lt;/span&amp;gt;))



&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

createRef的使用：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>4_createRef</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//创建组件&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;hljs-title class_&quot;&gt;Demo&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;hljs-title class_ inherited__&quot;&gt;React.Component&lt;/span&gt;{
&lt;span class=&quot;hljs-comment&quot;&gt;/*
React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是&quot;专人专用&quot;的
*/&lt;/span&gt;
myRef = &lt;span class=&quot;hljs-title class_&quot;&gt;React&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;createRef&lt;/span&gt;()
myRef2 = &lt;span class=&quot;hljs-title class_&quot;&gt;React&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;createRef&lt;/span&gt;()
&lt;span class=&quot;hljs-comment&quot;&gt;//展示左侧输入框的数据&lt;/span&gt;
showData = &lt;span class=&quot;hljs-function&quot;&gt;()=&amp;gt;&lt;/span&gt;{
&lt;span class=&quot;hljs-title function_&quot;&gt;alert&lt;/span&gt;(&lt;span class=&quot;hljs-variable language_&quot;&gt;this&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;myRef&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;current&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;value&lt;/span&gt;);
}
&lt;span class=&quot;hljs-comment&quot;&gt;//展示右侧输入框的数据&lt;/span&gt;
showData2 = &lt;span class=&quot;hljs-function&quot;&gt;()=&amp;gt;&lt;/span&gt;{
&lt;span class=&quot;hljs-title function_&quot;&gt;alert&lt;/span&gt;(&lt;span class=&quot;hljs-variable language_&quot;&gt;this&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;myRef2&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;current&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;value&lt;/span&gt;);
}
&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;hljs-params&quot;&gt;&lt;/span&gt;){
&lt;span class=&quot;hljs-keyword&quot;&gt;return&lt;/span&gt;(
&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;ref&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{this.myRef}&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;placeholder&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;点击按钮提示数据&quot;&lt;/span&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-symbol&quot;&gt;&amp;amp;nbsp;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;onClick&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{this.showData}&lt;/span&gt;&amp;gt;&lt;/span&gt;点我提示左侧的数据&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-symbol&quot;&gt;&amp;amp;nbsp;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;onBlur&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{this.showData2}&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;ref&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{this.myRef2}&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;placeholder&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;失去焦点提示数据&quot;&lt;/span&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-symbol&quot;&gt;&amp;amp;nbsp;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
)
}
}
&lt;span class=&quot;hljs-comment&quot;&gt;//渲染组件到页面&lt;/span&gt;
&lt;span class=&quot;hljs-title class_&quot;&gt;ReactDOM&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;Demo&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;a&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;1&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;b&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;2&quot;&lt;/span&gt;/&amp;gt;&lt;/span&gt;&lt;/span&gt;,&lt;span class=&quot;hljs-variable language_&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;getElementById&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'test'&lt;/span&gt;))
&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

事件处理 {#事件处理}

  • 通过onXxx属性指定事件处理函数(注意大小写)

      1. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
      1. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)

  • 通过event.target得到发生事件的DOM元素对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件处理</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//创建组件&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;hljs-title class_&quot;&gt;Demo&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;hljs-title class_ inherited__&quot;&gt;React.Component&lt;/span&gt;{
&lt;span class=&quot;hljs-comment&quot;&gt;/*
(1).通过onXxx属性指定事件处理函数(注意大小写)
a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 ------------------ 为了更好的兼容性
b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ------------------------为了高效
(2).通过event.target得到发生事件的DOM元素对象 ------------------------------不要过度使用ref
*/&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//创建ref容器&lt;/span&gt;
myRef = &lt;span class=&quot;hljs-title class_&quot;&gt;React&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;createRef&lt;/span&gt;()
myRef2 = &lt;span class=&quot;hljs-title class_&quot;&gt;React&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;createRef&lt;/span&gt;()


	&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//展示左侧输入框的数据&amp;lt;/span&amp;gt;
	showData = &amp;lt;span class=&amp;quot;hljs-function&amp;quot;&amp;gt;(&amp;lt;span class=&amp;quot;hljs-params&amp;quot;&amp;gt;event&amp;lt;/span&amp;gt;)=&amp;amp;gt;&amp;lt;/span&amp;gt;{
		&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;console&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;log&amp;lt;/span&amp;gt;(event.&amp;lt;span class=&amp;quot;hljs-property&amp;quot;&amp;gt;target&amp;lt;/span&amp;gt;);
		&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;alert&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;this&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-property&amp;quot;&amp;gt;myRef&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-property&amp;quot;&amp;gt;current&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-property&amp;quot;&amp;gt;value&amp;lt;/span&amp;gt;);
	}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//展示右侧输入框的数据&amp;amp;lt;/span&amp;amp;gt;
showData2 = &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;event&amp;amp;lt;/span&amp;amp;gt;)=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
	&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;alert&amp;amp;lt;/span&amp;amp;gt;(event.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;target&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;value&amp;amp;lt;/span&amp;amp;gt;);
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;render&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt;(
		&amp;amp;lt;span class=&amp;amp;quot;xml&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;input&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;ref&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.myRef}&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;type&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;text&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;placeholder&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;点击按钮提示数据&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt;/&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-symbol&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;amp;nbsp;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onClick&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.showData}&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;点我提示左侧的数据&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-symbol&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;amp;nbsp;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;input&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onBlur&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.showData2}&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;type&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;text&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;placeholder&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;失去焦点提示数据&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt;/&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-symbol&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;amp;nbsp;&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
	)
}



}
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//渲染组件到页面&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;ReactDOM&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;render&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;Demo&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;a&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;&amp;quot;1&amp;quot;&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;b&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;&amp;quot;2&amp;quot;&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;document&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;getElementById&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'test'&amp;lt;/span&amp;gt;))



&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

React收集表单数据 {#react收集表单数据}

受控组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>受控组件</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//创建组件&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;hljs-title class_&quot;&gt;Login&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;hljs-title class_ inherited__&quot;&gt;React.Component&lt;/span&gt;{


	&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//初始化状态&amp;lt;/span&amp;gt;
	state = {
		&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;username&amp;lt;/span&amp;gt;:&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;''&amp;lt;/span&amp;gt;, &amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//用户名&amp;lt;/span&amp;gt;
		&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;password&amp;lt;/span&amp;gt;:&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;''&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//密码&amp;lt;/span&amp;gt;
	}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//保存用户名到状态中&amp;amp;lt;/span&amp;amp;gt;
saveUsername = &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;event&amp;amp;lt;/span&amp;amp;gt;)=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;setState&amp;amp;lt;/span&amp;amp;gt;({&amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;username&amp;amp;lt;/span&amp;amp;gt;:event.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;target&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;value&amp;amp;lt;/span&amp;amp;gt;})
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//保存密码到状态中&amp;amp;lt;/span&amp;amp;gt;
savePassword = &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;event&amp;amp;lt;/span&amp;amp;gt;)=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;setState&amp;amp;lt;/span&amp;amp;gt;({&amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;password&amp;amp;lt;/span&amp;amp;gt;:event.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;target&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;value&amp;amp;lt;/span&amp;amp;gt;})
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//表单提交的回调&amp;amp;lt;/span&amp;amp;gt;
handleSubmit = &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;event&amp;amp;lt;/span&amp;amp;gt;)=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
	event.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;preventDefault&amp;amp;lt;/span&amp;amp;gt;() &amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//阻止表单提交&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;const&amp;amp;lt;/span&amp;amp;gt; {username,password} = &amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;state&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;alert&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;`你输入的用户名是：&amp;amp;lt;span class=&amp;amp;quot;hljs-subst&amp;amp;quot;&amp;amp;gt;${username}&amp;amp;lt;/span&amp;amp;gt;,你输入的密码是：&amp;amp;lt;span class=&amp;amp;quot;hljs-subst&amp;amp;quot;&amp;amp;gt;${password}&amp;amp;lt;/span&amp;amp;gt;`&amp;amp;lt;/span&amp;amp;gt;)
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;render&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt;(
		&amp;amp;lt;span class=&amp;amp;quot;xml&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;form&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onSubmit&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.handleSubmit}&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			用户名：&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;input&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onChange&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.saveUsername}&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;type&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;text&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;name&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;username&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt;/&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			密码：&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;input&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onChange&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.savePassword}&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;type&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;password&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;name&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;password&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt;/&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;登录&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;form&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
	)
}



}
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//渲染组件&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;ReactDOM&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;render&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;Login&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;document&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;getElementById&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'test'&amp;lt;/span&amp;gt;))



&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

非受控组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>非受控组件</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//创建组件&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;hljs-title class_&quot;&gt;Login&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;hljs-title class_ inherited__&quot;&gt;React.Component&lt;/span&gt;{
handleSubmit = &lt;span class=&quot;hljs-function&quot;&gt;(&lt;span class=&quot;hljs-params&quot;&gt;event&lt;/span&gt;)=&amp;gt;&lt;/span&gt;{
event.&lt;span class=&quot;hljs-title function_&quot;&gt;preventDefault&lt;/span&gt;() &lt;span class=&quot;hljs-comment&quot;&gt;//阻止表单提交&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;const&lt;/span&gt; {username,password} = &lt;span class=&quot;hljs-variable language_&quot;&gt;this&lt;/span&gt;
&lt;span class=&quot;hljs-title function_&quot;&gt;alert&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;你输入的用户名是：&amp;lt;span class=&amp;quot;hljs-subst&amp;quot;&amp;gt;${username.value}&amp;lt;/span&amp;gt;，你输入的密码是：&amp;lt;span class=&amp;quot;hljs-subst&amp;quot;&amp;gt;${password.value}&amp;lt;/span&amp;gt;&lt;/span&gt;)
}
&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;hljs-params&quot;&gt;&lt;/span&gt;){
&lt;span class=&quot;hljs-keyword&quot;&gt;return&lt;/span&gt;(
&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;form&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;onSubmit&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{this.handleSubmit}&lt;/span&gt;&amp;gt;&lt;/span&gt;
用户名：&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;ref&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{c&lt;/span&gt; =&amp;gt;&lt;/span&gt; this.username = c} type=&quot;text&quot; name=&quot;username&quot;/&amp;gt;
密码：&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;ref&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;{c&lt;/span&gt; =&amp;gt;&lt;/span&gt; this.password = c} type=&quot;password&quot; name=&quot;password&quot;/&amp;gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt;&amp;gt;&lt;/span&gt;登录&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;button&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;form&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
)
}
}
&lt;span class=&quot;hljs-comment&quot;&gt;//渲染组件&lt;/span&gt;
&lt;span class=&quot;hljs-title class_&quot;&gt;ReactDOM&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;render&lt;/span&gt;(&lt;span class=&quot;xml&quot;&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;Login&lt;/span&gt;/&amp;gt;&lt;/span&gt;&lt;/span&gt;,&lt;span class=&quot;hljs-variable language_&quot;&gt;document&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;getElementById&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'test'&lt;/span&gt;))
&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

函数柯里化 {#函数柯里化}

高阶函数-函数柯里化 {#高阶函数-函数柯里化}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>高阶函数_函数柯里化</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//#region &lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;/*
高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
常见的高阶函数有：Promise、setTimeout、arr.map()等等


			函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 
				function sum(a){
					return(b)=&amp;amp;gt;{
						return (c)=&amp;amp;gt;{
							return a+b+c
						}
					}
				}
			*/&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//#endregion&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//创建组件&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-keyword&amp;quot;&amp;gt;class&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;Login&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-keyword&amp;quot;&amp;gt;extends&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-title class_ inherited__&amp;quot;&amp;gt;React.Component&amp;lt;/span&amp;gt;{
	&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//初始化状态&amp;lt;/span&amp;gt;
	state = {
		&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;username&amp;lt;/span&amp;gt;:&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;''&amp;lt;/span&amp;gt;, &amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//用户名&amp;lt;/span&amp;gt;
		&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;password&amp;lt;/span&amp;gt;:&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;''&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//密码&amp;lt;/span&amp;gt;
	}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//保存表单数据到状态中&amp;amp;lt;/span&amp;amp;gt;
saveFormData = &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;dataType&amp;amp;lt;/span&amp;amp;gt;)=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;event&amp;amp;lt;/span&amp;amp;gt;)=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
		&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;setState&amp;amp;lt;/span&amp;amp;gt;({[dataType]:event.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;target&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;value&amp;amp;lt;/span&amp;amp;gt;})
	}
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//表单提交的回调&amp;amp;lt;/span&amp;amp;gt;
handleSubmit = &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;event&amp;amp;lt;/span&amp;amp;gt;)=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
	event.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;preventDefault&amp;amp;lt;/span&amp;amp;gt;() &amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//阻止表单提交&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;const&amp;amp;lt;/span&amp;amp;gt; {username,password} = &amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;state&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;alert&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;`你输入的用户名是：&amp;amp;lt;span class=&amp;amp;quot;hljs-subst&amp;amp;quot;&amp;amp;gt;${username}&amp;amp;lt;/span&amp;amp;gt;,你输入的密码是：&amp;amp;lt;span class=&amp;amp;quot;hljs-subst&amp;amp;quot;&amp;amp;gt;${password}&amp;amp;lt;/span&amp;amp;gt;`&amp;amp;lt;/span&amp;amp;gt;)
}
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;render&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt;(
		&amp;amp;lt;span class=&amp;amp;quot;xml&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;form&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onSubmit&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.handleSubmit}&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			用户名：&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;input&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onChange&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.saveFormData(&amp;amp;lt;/span&amp;amp;gt;'&amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;username&amp;amp;lt;/span&amp;amp;gt;')} &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;type&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;text&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;name&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;username&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt;/&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			密码：&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;input&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onChange&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.saveFormData(&amp;amp;lt;/span&amp;amp;gt;'&amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;password&amp;amp;lt;/span&amp;amp;gt;')} &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;type&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;password&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;name&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;password&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt;/&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;登录&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;form&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
	)
}



}
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//渲染组件&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;ReactDOM&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;render&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;Login&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;document&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;getElementById&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'test'&amp;lt;/span&amp;gt;))



&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

不用函数柯里化的实现 {#不用函数柯里化的实现}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_不用函数柯里化的实现</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//创建组件&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;hljs-title class_&quot;&gt;Login&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;hljs-title class_ inherited__&quot;&gt;React.Component&lt;/span&gt;{
&lt;span class=&quot;hljs-comment&quot;&gt;//初始化状态&lt;/span&gt;
state = {
&lt;span class=&quot;hljs-attr&quot;&gt;username&lt;/span&gt;:&lt;span class=&quot;hljs-string&quot;&gt;''&lt;/span&gt;, &lt;span class=&quot;hljs-comment&quot;&gt;//用户名&lt;/span&gt;
&lt;span class=&quot;hljs-attr&quot;&gt;password&lt;/span&gt;:&lt;span class=&quot;hljs-string&quot;&gt;''&lt;/span&gt; &lt;span class=&quot;hljs-comment&quot;&gt;//密码&lt;/span&gt;
}


	&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//保存表单数据到状态中&amp;lt;/span&amp;gt;
	saveFormData = &amp;lt;span class=&amp;quot;hljs-function&amp;quot;&amp;gt;(&amp;lt;span class=&amp;quot;hljs-params&amp;quot;&amp;gt;dataType,event&amp;lt;/span&amp;gt;)=&amp;amp;gt;&amp;lt;/span&amp;gt;{
		&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;this&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;setState&amp;lt;/span&amp;gt;({[dataType]:event.&amp;lt;span class=&amp;quot;hljs-property&amp;quot;&amp;gt;target&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-property&amp;quot;&amp;gt;value&amp;lt;/span&amp;gt;})
	}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//表单提交的回调&amp;amp;lt;/span&amp;amp;gt;
handleSubmit = &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;event&amp;amp;lt;/span&amp;amp;gt;)=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
	event.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;preventDefault&amp;amp;lt;/span&amp;amp;gt;() &amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//阻止表单提交&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;const&amp;amp;lt;/span&amp;amp;gt; {username,password} = &amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;state&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;alert&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;`你输入的用户名是：&amp;amp;lt;span class=&amp;amp;quot;hljs-subst&amp;amp;quot;&amp;amp;gt;${username}&amp;amp;lt;/span&amp;amp;gt;,你输入的密码是：&amp;amp;lt;span class=&amp;amp;quot;hljs-subst&amp;amp;quot;&amp;amp;gt;${password}&amp;amp;lt;/span&amp;amp;gt;`&amp;amp;lt;/span&amp;amp;gt;)
}
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;render&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt;(
		&amp;amp;lt;span class=&amp;amp;quot;xml&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;form&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onSubmit&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.handleSubmit}&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			用户名：&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;input&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onChange&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{event&amp;amp;lt;/span&amp;amp;gt; =&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt; this.saveFormData('username',event) } type=&amp;amp;quot;text&amp;amp;quot; name=&amp;amp;quot;username&amp;amp;quot;/&amp;amp;amp;gt;
			密码：&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;input&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onChange&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{event&amp;amp;lt;/span&amp;amp;gt; =&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt; this.saveFormData('password',event) } type=&amp;amp;quot;password&amp;amp;quot; name=&amp;amp;quot;password&amp;amp;quot;/&amp;amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;登录&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;form&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
	)
}



}
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//渲染组件&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;ReactDOM&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;render&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;Login&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;document&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;getElementById&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'test'&amp;lt;/span&amp;gt;))



&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

组件的生命周期 {#组件的生命周期}

理解 {#理解-3}

  1. 组件从创建到死亡它会经历一些特定的阶段。
  2. React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
  3. 我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

引出生命周期 {#引出生命周期}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1_引出生命周期</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//创建组件&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//生命周期回调函数 &amp;lt;=&amp;gt; 生命周期钩子函数 &amp;lt;=&amp;gt; 生命周期函数 &amp;lt;=&amp;gt; 生命周期钩子&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;hljs-title class_&quot;&gt;Life&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;hljs-title class_ inherited__&quot;&gt;React.Component&lt;/span&gt;{


	state = {&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;opacity&amp;lt;/span&amp;gt;:&amp;lt;span class=&amp;quot;hljs-number&amp;quot;&amp;gt;1&amp;lt;/span&amp;gt;}

death = &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;()=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
	&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//卸载组件&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-title class_&amp;amp;quot;&amp;amp;gt;ReactDOM&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;unmountComponentAtNode&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;document&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;getElementById&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'test'&amp;amp;lt;/span&amp;amp;gt;))
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//组件挂载完毕&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;componentDidMount&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'componentDidMount'&amp;amp;lt;/span&amp;amp;gt;);
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;timer&amp;amp;lt;/span&amp;amp;gt; = &amp;amp;lt;span class=&amp;amp;quot;hljs-built_in&amp;amp;quot;&amp;amp;gt;setInterval&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;() =&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt; {
		&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//获取原状态&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;let&amp;amp;lt;/span&amp;amp;gt; {opacity} = &amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;state&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//减小0.1&amp;amp;lt;/span&amp;amp;gt;
		opacity -= &amp;amp;lt;span class=&amp;amp;quot;hljs-number&amp;amp;quot;&amp;amp;gt;0.1&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;if&amp;amp;lt;/span&amp;amp;gt;(opacity &amp;amp;amp;lt;= &amp;amp;lt;span class=&amp;amp;quot;hljs-number&amp;amp;quot;&amp;amp;gt;0&amp;amp;lt;/span&amp;amp;gt;) opacity = &amp;amp;lt;span class=&amp;amp;quot;hljs-number&amp;amp;quot;&amp;amp;gt;1&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//设置新的透明度&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;setState&amp;amp;lt;/span&amp;amp;gt;({opacity})
	}, &amp;amp;lt;span class=&amp;amp;quot;hljs-number&amp;amp;quot;&amp;amp;gt;200&amp;amp;lt;/span&amp;amp;gt;);
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//组件将要卸载&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;componentWillUnmount&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//清除定时器&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-built_in&amp;amp;quot;&amp;amp;gt;clearInterval&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;timer&amp;amp;lt;/span&amp;amp;gt;)
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//初始化渲染、状态更新之后&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;render&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'render'&amp;amp;lt;/span&amp;amp;gt;);
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt;(
		&amp;amp;lt;span class=&amp;amp;quot;xml&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;h2&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;style&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{{opacity:this.state.opacity}}&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;React学不会怎么办？&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;h2&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onClick&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.death}&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;不活了&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
	)
}



}
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//渲染组件&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;ReactDOM&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;render&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;Life&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;document&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;getElementById&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'test'&amp;lt;/span&amp;gt;))



&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

生命周期（旧） {#生命周期旧}

2_react生命周期(旧)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_react生命周期(旧)</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;/*
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
1.	constructor()
2.	componentWillMount()
3.	render()
4.	componentDidMount() =====&amp;gt; 常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
2. 更新阶段: 由组件内部this.setSate()或父组件render触发
1.	shouldComponentUpdate()
2.	componentWillUpdate()
3.	render() =====&amp;gt; 必须使用的一个
4.	componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1.	componentWillUnmount()  =====&amp;gt; 常用
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
*/&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//创建组件&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;hljs-title class_&quot;&gt;Count&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;hljs-title class_ inherited__&quot;&gt;React.Component&lt;/span&gt;{


	&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//构造器&amp;lt;/span&amp;gt;
	&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;constructor&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-params&amp;quot;&amp;gt;props&amp;lt;/span&amp;gt;){
		&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;console&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;log&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'Count---constructor'&amp;lt;/span&amp;gt;);
		&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;super&amp;lt;/span&amp;gt;(props)
		&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//初始化状态&amp;lt;/span&amp;gt;
		&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;this&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-property&amp;quot;&amp;gt;state&amp;lt;/span&amp;gt; = {&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;count&amp;lt;/span&amp;gt;:&amp;lt;span class=&amp;quot;hljs-number&amp;quot;&amp;gt;0&amp;lt;/span&amp;gt;}
	}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//加1按钮的回调&amp;amp;lt;/span&amp;amp;gt;
add = &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;()=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
	&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//获取原状态&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;const&amp;amp;lt;/span&amp;amp;gt; {count} = &amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;state&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//更新状态&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;setState&amp;amp;lt;/span&amp;amp;gt;({&amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;count&amp;amp;lt;/span&amp;amp;gt;:count+&amp;amp;lt;span class=&amp;amp;quot;hljs-number&amp;amp;quot;&amp;amp;gt;1&amp;amp;lt;/span&amp;amp;gt;})
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//卸载组件按钮的回调&amp;amp;lt;/span&amp;amp;gt;
death = &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;()=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
	&amp;amp;lt;span class=&amp;amp;quot;hljs-title class_&amp;amp;quot;&amp;amp;gt;ReactDOM&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;unmountComponentAtNode&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;document&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;getElementById&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'test'&amp;amp;lt;/span&amp;amp;gt;))
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//强制更新按钮的回调&amp;amp;lt;/span&amp;amp;gt;
force = &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;()=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;forceUpdate&amp;amp;lt;/span&amp;amp;gt;()
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//组件将要挂载的钩子&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;componentWillMount&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'Count---componentWillMount'&amp;amp;lt;/span&amp;amp;gt;);
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//组件挂载完毕的钩子&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;componentDidMount&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'Count---componentDidMount'&amp;amp;lt;/span&amp;amp;gt;);
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//组件将要卸载的钩子&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;componentWillUnmount&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'Count---componentWillUnmount'&amp;amp;lt;/span&amp;amp;gt;);
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//控制组件更新的&amp;amp;quot;阀门&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;shouldComponentUpdate&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'Count---shouldComponentUpdate'&amp;amp;lt;/span&amp;amp;gt;);
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-literal&amp;amp;quot;&amp;amp;gt;true&amp;amp;lt;/span&amp;amp;gt;
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//组件将要更新的钩子&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;componentWillUpdate&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'Count---componentWillUpdate'&amp;amp;lt;/span&amp;amp;gt;);
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//组件更新完毕的钩子&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;componentDidUpdate&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'Count---componentDidUpdate'&amp;amp;lt;/span&amp;amp;gt;);
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;render&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'Count---render'&amp;amp;lt;/span&amp;amp;gt;);
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;const&amp;amp;lt;/span&amp;amp;gt; {count} = &amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;state&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt;(
		&amp;amp;lt;span class=&amp;amp;quot;xml&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;h2&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;当前求和为：{count}&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;h2&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onClick&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.add}&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;点我+1&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onClick&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.death}&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;卸载组件&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onClick&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.force}&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;不更改任何状态中的数据，强制更新一下&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
	)
}



}


&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//父组件A&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-keyword&amp;quot;&amp;gt;class&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;A&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-keyword&amp;quot;&amp;gt;extends&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-title class_ inherited__&amp;quot;&amp;gt;React.Component&amp;lt;/span&amp;gt;{
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//初始化状态&amp;lt;/span&amp;gt;
state = {&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;carName&amp;lt;/span&amp;gt;:&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'奔驰'&amp;lt;/span&amp;gt;}


changeCar = &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;()=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;setState&amp;amp;lt;/span&amp;amp;gt;({&amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;carName&amp;amp;lt;/span&amp;amp;gt;:&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'奥拓'&amp;amp;lt;/span&amp;amp;gt;})
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;render&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt;(
		&amp;amp;lt;span class=&amp;amp;quot;xml&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;我是A组件&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onClick&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.changeCar}&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;换车&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;B&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;carName&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.state.carName}/&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
	)
}



}


&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//子组件B&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-keyword&amp;quot;&amp;gt;class&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;B&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-keyword&amp;quot;&amp;gt;extends&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-title class_ inherited__&amp;quot;&amp;gt;React.Component&amp;lt;/span&amp;gt;{
&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//组件将要接收新的props的钩子&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;componentWillReceiveProps&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-params&amp;quot;&amp;gt;props&amp;lt;/span&amp;gt;){
&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;console&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;log&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'B---componentWillReceiveProps'&amp;lt;/span&amp;gt;,props);
}


&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//控制组件更新的&amp;amp;quot;阀门&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;shouldComponentUpdate&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'B---shouldComponentUpdate'&amp;amp;lt;/span&amp;amp;gt;);
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-literal&amp;amp;quot;&amp;amp;gt;true&amp;amp;lt;/span&amp;amp;gt;
}
&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//组件将要更新的钩子&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;componentWillUpdate&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'B---componentWillUpdate'&amp;amp;lt;/span&amp;amp;gt;);
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//组件更新完毕的钩子&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;componentDidUpdate&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'B---componentDidUpdate'&amp;amp;lt;/span&amp;amp;gt;);
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;render&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'B---render'&amp;amp;lt;/span&amp;amp;gt;);
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt;(
		&amp;amp;lt;span class=&amp;amp;quot;xml&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;我是B组件，接收到的车是:{this.props.carName}&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
	)
}



}


&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//渲染组件&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;ReactDOM&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;render&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;Count&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;document&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;getElementById&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'test'&amp;lt;/span&amp;gt;))



&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

生命周期（新） {#生命周期新}

3_react生命周期(新)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3_react生命周期(新)</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/17.0.1/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/17.0.1/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/17.0.1/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//创建组件&lt;/span&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;hljs-title class_&quot;&gt;Count&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;hljs-title class_ inherited__&quot;&gt;React.Component&lt;/span&gt;{
&lt;span class=&quot;hljs-comment&quot;&gt;/*
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
1.	constructor()
2.	getDerivedStateFromProps
3.	render()
4.	componentDidMount() =====&amp;gt; 常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
1.	getDerivedStateFromProps
2.	shouldComponentUpdate()
3.	render()
4.	getSnapshotBeforeUpdate
5.	componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1.	componentWillUnmount()  =====&amp;gt; 常用
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
*/&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;//构造器&lt;/span&gt;
&lt;span class=&quot;hljs-title function_&quot;&gt;constructor&lt;/span&gt;(&lt;span class=&quot;hljs-params&quot;&gt;props&lt;/span&gt;){
&lt;span class=&quot;hljs-variable language_&quot;&gt;console&lt;/span&gt;.&lt;span class=&quot;hljs-title function_&quot;&gt;log&lt;/span&gt;(&lt;span class=&quot;hljs-string&quot;&gt;'Count---constructor'&lt;/span&gt;);
&lt;span class=&quot;hljs-variable language_&quot;&gt;super&lt;/span&gt;(props)
&lt;span class=&quot;hljs-comment&quot;&gt;//初始化状态&lt;/span&gt;
&lt;span class=&quot;hljs-variable language_&quot;&gt;this&lt;/span&gt;.&lt;span class=&quot;hljs-property&quot;&gt;state&lt;/span&gt; = {&lt;span class=&quot;hljs-attr&quot;&gt;count&lt;/span&gt;:&lt;span class=&quot;hljs-number&quot;&gt;0&lt;/span&gt;}
}


	&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//加1按钮的回调&amp;lt;/span&amp;gt;
	add = &amp;lt;span class=&amp;quot;hljs-function&amp;quot;&amp;gt;()=&amp;amp;gt;&amp;lt;/span&amp;gt;{
		&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//获取原状态&amp;lt;/span&amp;gt;
		&amp;lt;span class=&amp;quot;hljs-keyword&amp;quot;&amp;gt;const&amp;lt;/span&amp;gt; {count} = &amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;this&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-property&amp;quot;&amp;gt;state&amp;lt;/span&amp;gt;
		&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//更新状态&amp;lt;/span&amp;gt;
		&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;this&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;setState&amp;lt;/span&amp;gt;({&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;count&amp;lt;/span&amp;gt;:count+&amp;lt;span class=&amp;quot;hljs-number&amp;quot;&amp;gt;1&amp;lt;/span&amp;gt;})
	}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//卸载组件按钮的回调&amp;amp;lt;/span&amp;amp;gt;
death = &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;()=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
	&amp;amp;lt;span class=&amp;amp;quot;hljs-title class_&amp;amp;quot;&amp;amp;gt;ReactDOM&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;unmountComponentAtNode&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;document&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;getElementById&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'test'&amp;amp;lt;/span&amp;amp;gt;))
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//强制更新按钮的回调&amp;amp;lt;/span&amp;amp;gt;
force = &amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;()=&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;forceUpdate&amp;amp;lt;/span&amp;amp;gt;()
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;static&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;getDerivedStateFromProps&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;props,state&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'getDerivedStateFromProps'&amp;amp;lt;/span&amp;amp;gt;,props,state);
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-literal&amp;amp;quot;&amp;amp;gt;null&amp;amp;lt;/span&amp;amp;gt;
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//在更新之前获取快照&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;getSnapshotBeforeUpdate&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'getSnapshotBeforeUpdate'&amp;amp;lt;/span&amp;amp;gt;);
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'atguigu'&amp;amp;lt;/span&amp;amp;gt;
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//组件挂载完毕的钩子&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;componentDidMount&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'Count---componentDidMount'&amp;amp;lt;/span&amp;amp;gt;);
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//组件将要卸载的钩子&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;componentWillUnmount&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'Count---componentWillUnmount'&amp;amp;lt;/span&amp;amp;gt;);
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//控制组件更新的&amp;amp;quot;阀门&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;shouldComponentUpdate&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'Count---shouldComponentUpdate'&amp;amp;lt;/span&amp;amp;gt;);
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-literal&amp;amp;quot;&amp;amp;gt;true&amp;amp;lt;/span&amp;amp;gt;
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//组件更新完毕的钩子&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;componentDidUpdate&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;preProps,preState,snapshotValue&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'Count---componentDidUpdate'&amp;amp;lt;/span&amp;amp;gt;,preProps,preState,snapshotValue);
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;render&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;console&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;log&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'Count---render'&amp;amp;lt;/span&amp;amp;gt;);
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;const&amp;amp;lt;/span&amp;amp;gt; {count} = &amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;state&amp;amp;lt;/span&amp;amp;gt;
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt;(
		&amp;amp;lt;span class=&amp;amp;quot;xml&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;h2&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;当前求和为：{count}&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;h2&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onClick&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.add}&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;点我+1&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onClick&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.death}&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;卸载组件&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;onClick&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{this.force}&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;不更改任何状态中的数据，强制更新一下&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;button&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
	)
}



}


&amp;lt;span class=&amp;quot;hljs-comment&amp;quot;&amp;gt;//渲染组件&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;ReactDOM&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;render&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;Count&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;count&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;{199}/&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;document&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;getElementById&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'test'&amp;lt;/span&amp;gt;))



&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

重要的钩子 {#重要的钩子}

  1. render：初始化渲染或更新渲染调用
  2. componentDidMount：开启监听, 发送ajax请求
  3. componentWillUnmount：做一些收尾工作, 如: 清理定时器

即将废弃的钩子 {#即将废弃的钩子}

  1. componentWillMount
  2. componentWillReceiveProps
  3. componentWillUpdate

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

getSnapShotBeforeUpdate的使用场景 {#getsnapshotbeforeupdate的使用场景}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>4_getSnapShotBeforeUpdate的使用场景</title>
	<style>
		.list{
			width: 200px;
			height: 150px;
			background-color: skyblue;
			overflow: auto;
		}
		.news{
			height: 30px;
		}
	</style>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>

&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react核心库 --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/17.0.1/react.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入react-dom，用于支持react操作DOM --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/17.0.1/react-dom.development.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-comment&quot;&gt;&amp;lt;!-- 引入babel，用于将jsx转为js --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;src&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;../js/17.0.1/babel.min.js&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt; &lt;span class=&quot;hljs-attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;hljs-string&quot;&gt;&quot;text/babel&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;javascript&quot;&gt;
&lt;span class=&quot;hljs-keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;hljs-title class_&quot;&gt;NewsList&lt;/span&gt; &lt;span class=&quot;hljs-keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;hljs-title class_ inherited__&quot;&gt;React.Component&lt;/span&gt;{


	state = {&amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;newsArr&amp;lt;/span&amp;gt;:[]}

&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;componentDidMount&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-built_in&amp;amp;quot;&amp;amp;gt;setInterval&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-function&amp;amp;quot;&amp;amp;gt;() =&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt; {
		&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//获取原状态&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;const&amp;amp;lt;/span&amp;amp;gt; {newsArr} = &amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;state&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//模拟一条新闻&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;const&amp;amp;lt;/span&amp;amp;gt; news = &amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;'新闻'&amp;amp;lt;/span&amp;amp;gt;+ (newsArr.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;length&amp;amp;lt;/span&amp;amp;gt;+&amp;amp;lt;span class=&amp;amp;quot;hljs-number&amp;amp;quot;&amp;amp;gt;1&amp;amp;lt;/span&amp;amp;gt;)
		&amp;amp;lt;span class=&amp;amp;quot;hljs-comment&amp;amp;quot;&amp;amp;gt;//更新状态&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;setState&amp;amp;lt;/span&amp;amp;gt;({&amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;newsArr&amp;amp;lt;/span&amp;amp;gt;:[news,...newsArr]})
	}, &amp;amp;lt;span class=&amp;amp;quot;hljs-number&amp;amp;quot;&amp;amp;gt;1000&amp;amp;lt;/span&amp;amp;gt;);
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;getSnapshotBeforeUpdate&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;refs&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;list&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;scrollHeight&amp;amp;lt;/span&amp;amp;gt;
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;componentDidUpdate&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;preProps,preState,height&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;refs&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;list&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;scrollTop&amp;amp;lt;/span&amp;amp;gt; += &amp;amp;lt;span class=&amp;amp;quot;hljs-variable language_&amp;amp;quot;&amp;amp;gt;this&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;refs&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;list&amp;amp;lt;/span&amp;amp;gt;.&amp;amp;lt;span class=&amp;amp;quot;hljs-property&amp;amp;quot;&amp;amp;gt;scrollHeight&amp;amp;lt;/span&amp;amp;gt; - height
}

&amp;amp;lt;span class=&amp;amp;quot;hljs-title function_&amp;amp;quot;&amp;amp;gt;render&amp;amp;lt;/span&amp;amp;gt;(&amp;amp;lt;span class=&amp;amp;quot;hljs-params&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;){
	&amp;amp;lt;span class=&amp;amp;quot;hljs-keyword&amp;amp;quot;&amp;amp;gt;return&amp;amp;lt;/span&amp;amp;gt;(
		&amp;amp;lt;span class=&amp;amp;quot;xml&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;className&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;list&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;ref&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;list&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
			{
				this.state.newsArr.map((n,index)=&amp;amp;amp;gt;{
					return &amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;key&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;{index}&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;className&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;news&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;{n}&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
				})
			}
		&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;div&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
	)
}



}
&amp;lt;span class=&amp;quot;hljs-title class_&amp;quot;&amp;gt;ReactDOM&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;render&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;NewsList&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;,&amp;lt;span class=&amp;quot;hljs-variable language_&amp;quot;&amp;gt;document&amp;lt;/span&amp;gt;.&amp;lt;span class=&amp;quot;hljs-title function_&amp;quot;&amp;gt;getElementById&amp;lt;/span&amp;gt;(&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;'test'&amp;lt;/span&amp;gt;))



&lt;/span&gt;&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;/&lt;span class=&quot;hljs-name&quot;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;



</body></html>

key的作用 {#key的作用}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>key的作用</title>
</head>
<body>
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
/*
经典面试题:
1). react/vue中的key有什么作用？（key的内部原理是什么？）
2). 为什么遍历列表时，key最好不要用index?


		1. 虚拟DOM中key的作用：
			1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。

		2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 
			随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：

		a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
			(1).若虚拟DOM中内容没变, 直接使用之前的真实DOM
			(2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM

		b. 旧虚拟DOM中未找到与新虚拟DOM相同的key
			根据数据创建新的真实DOM，随后渲染到到页面
						
2. 用index作为key可能会引发的问题：
	1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
		会产生没有必要的真实DOM更新 ==&amp;amp;amp;gt; 界面效果没问题, 但效率低。

	2. 如果结构中还包含输入类的DOM：
		会产生错误DOM更新 ==&amp;amp;amp;gt; 界面有问题。
					
	3. 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，
		仅用于渲染列表用于展示，使用index作为key是没有问题的。
		
3. 开发中如何选择key?:
	1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
	2.如果确定只是简单的展示数据，用index也是可以的。







*/


/* 
	慢动作回放----使用index索引值作为key

	初始数据：
			{id:1,name:'小张',age:18},
			{id:2,name:'小李',age:19},
	初始的虚拟DOM：
			&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;li&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;key&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;0&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;小张---18&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;input&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;type&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;&amp;quot;text&amp;quot;&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;li&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
			&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;li&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;key&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;1&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;小李---19&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;input&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;type&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;&amp;quot;text&amp;quot;&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;li&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;

更新后的数据：
		{id:3,name:'小王',age:20},
		{id:1,name:'小张',age:18},
		{id:2,name:'小李',age:19},
更新数据后的虚拟DOM：
		&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;li&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;key&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;0&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;小王---20&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;input&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;type&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;text&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt;/&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;li&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;li&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;key&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;1&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;小张---18&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;input&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;type&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;text&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt;/&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;li&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;li&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;key&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;2&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;小李---19&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;input&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;type&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;text&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt;/&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;li&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;







慢动作回放----使用id唯一标识作为key


	初始数据：
			{id:1,name:'小张',age:18},
			{id:2,name:'小李',age:19},
	初始的虚拟DOM：
			&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;li&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;key&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;1&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;小张---18&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;input&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;type&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;&amp;quot;text&amp;quot;&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;li&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
			&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;li&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;key&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;2&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;小李---19&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;input&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;type&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;&amp;quot;text&amp;quot;&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;li&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;

更新后的数据：
		{id:3,name:'小王',age:20},
		{id:1,name:'小张',age:18},
		{id:2,name:'小李',age:19},
更新数据后的虚拟DOM：
		&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;li&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;key&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;3&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;小王---20&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;input&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;type&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;text&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt;/&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;li&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;li&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;key&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;1&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;小张---18&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;input&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;type&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;text&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt;/&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;li&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
		&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;li&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;key&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;2&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;小李---19&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;input&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;span class=&amp;amp;quot;hljs-attr&amp;amp;quot;&amp;amp;gt;type&amp;amp;lt;/span&amp;amp;gt;=&amp;amp;lt;span class=&amp;amp;quot;hljs-string&amp;amp;quot;&amp;amp;gt;&amp;amp;quot;text&amp;amp;quot;&amp;amp;lt;/span&amp;amp;gt;/&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;span class=&amp;amp;quot;hljs-tag&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;lt;/&amp;amp;lt;span class=&amp;amp;quot;hljs-name&amp;amp;quot;&amp;amp;gt;li&amp;amp;lt;/span&amp;amp;gt;&amp;amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;





*/
class Person extends React.Component{


state = {
	persons:[
		{id:1,name:'小张',age:18},
		{id:2,name:'小李',age:19},
	]
}

add = ()=&amp;amp;gt;{
const {persons} = this.state
const p = {id:persons.length+1,name:'小王',age:20}
this.setState({persons:[p,...persons]})
}


render(){
return (
&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;div&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;h2&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;展示人员信息&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;h2&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;button&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;onClick&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;{this.add}&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;添加一个小王&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;button&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;h3&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;使用index（索引值）作为key&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;h3&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;ul&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
{
this.state.persons.map((personObj,index)=&amp;amp;gt;{
return &amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;li&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;key&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;{index}&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;{personObj.name}---{personObj.age}&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;input&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;type&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;&amp;quot;text&amp;quot;&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;li&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
})
}
&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;ul&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;hr&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;hr&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;h3&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;使用id（数据的唯一标识）作为key&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;h3&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;ul&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
{
this.state.persons.map((personObj)=&amp;amp;gt;{
return &amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;li&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;key&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;{personObj.id}&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;{personObj.name}---{personObj.age}&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;input&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;hljs-attr&amp;quot;&amp;gt;type&amp;lt;/span&amp;gt;=&amp;lt;span class=&amp;quot;hljs-string&amp;quot;&amp;gt;&amp;quot;text&amp;quot;&amp;lt;/span&amp;gt;/&amp;amp;gt;&amp;lt;/span&amp;gt;&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;li&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
})
}
&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;ul&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
&amp;lt;span class=&amp;quot;hljs-tag&amp;quot;&amp;gt;&amp;amp;lt;/&amp;lt;span class=&amp;quot;hljs-name&amp;quot;&amp;gt;div&amp;lt;/span&amp;gt;&amp;amp;gt;&amp;lt;/span&amp;gt;
)
}



}


ReactDOM.render(&lt;span class=&quot;hljs-tag&quot;&gt;&amp;lt;&lt;span class=&quot;hljs-name&quot;&gt;Person&lt;/span&gt;/&amp;gt;&lt;/span&gt;,document.getElementById('test'))



</script></body></html>

React脚手架 {#react脚手架}

使用 create-react-app 创建 react 应用 {#使用-create-react-app-创建-react-应用}

react脚手架 {#react脚手架-1}

  • xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目

    • 包含了所有需要的配置（语法检查、jsx编译、devServer...）
    • 下载好了所有相关的依赖
    • 可以直接运行一个简单效果

  • react提供了一个用于创建react项目的脚手架库: create-react-app

  • 项目的整体技术架构为: react + webpack + es6 + eslint

  • 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

创建项目并启动 {#创建项目并启动}

先安装node.js，如果要使用yarn，则安装yarn

npm install --global yarn

第一步 ，全局安装：npm i -g create-react-app

第二步 ，切换到想创项目的目录，使用命令：create-react-app hello-react

第三步 ，进入项目文件夹：cd hello-react

第四步 ，启动项目：npm start ，或者 yarn start

react脚手架项目结构 {#react脚手架项目结构}

public ---- 静态资源文件夹
		favicon.icon ------ 网站页签图标
		index.html -------- 主页面
		logo192.png ------- logo图
		logo512.png ------- logo图
		manifest.json ----- 应用加壳的配置文件
		robots.txt -------- 爬虫协议文件
src ---- 源码文件夹
		App.css -------- App组件的样式
		App.js --------- App组件
		App.test.js ---- 用于给App做测试
		index.css ------ 样式
		index.js ------- 入口文件
		logo.svg ------- logo图
		reportWebVitals.js
			---- 页面性能分析文件(需要web-vitals库的支持)
		setupTests.js
			---- 组件单元测试的文件(需要jest-dom库的支持)


后续更新！

赞(9)
未经允许不得转载：工具盒子 » React框架
标签：

厉飞雨

众生皆苦，唯有自渡！

相关推荐

最新文章

猜你喜欢

快捷分类

云服务器 日常运维 在线免费 开源工具 科学上网 开发笔记 区块链 白嫖帮 新视野 人工智能 网赚思路 Python笔记 Php笔记 Java笔记 链知识 币知识 IOS笔记 Android笔记 Mysql C语言笔记 前端开发 R笔记 Go笔记 mybatis笔记 Golang笔记 数据库 市场营销 软件教程 vps Rust笔记 软件使用 经验分享 Stable Diffusion chatgpt Midjourney 操作系统 Photoscape 加密货币 挖矿 Coze Meta 网络安全 网络运营 开源软件 Github ComfyUI 数字人 Docker笔记 Claude Oracle web3 linux windows mac redis git笔记 nginx kafka maven spring RocketMQ Zabbix ubuntu centos kubesphere ffmpeg jenkins hbase JavaScript笔记 WordPress nginx Hadoop vuejs mongo SQL Server PostgreSQL SQLite ElasticSearch Spark netty zookeeper RabbitMQ ClickHoust cocos2d gradle tomcat Markdown MinIO react Hexo git intellij idea android studio svn C++ spdlog nodejs C WordPress 宝塔面板 vim shell logstash 软件渗透 NeoDB CSS3 HTML Lua笔记 数据算法 嵌入式 debian 红帽RHEL Neo4j jquery nas 1panel aapanel 浏览器 谷歌 .net 微信 telegram Cloudflare 大数据 rust layui JumpServer DataEase TiDB DM数据库 虚拟机 elk sqlmap nacos Firefox C# Swagger Foxmail navicat DeepSeek