51工具盒子本文主要讲解前端React相关知识。
React入门 {#react入门}
React简介 {#react简介}
官网 {#官网}
介绍描述 {#介绍描述}
- 用于动态构建用户界面的 JavaScript 库(只关注于视图)
- 由Facebook开源
React的特点 {#react的特点}
- 声明式编码
- 组件化编码
- React Native 编写原生应用
- 高效（优秀的Diffing算法）
React高效的原因 {#react高效的原因}
- 使用虚拟(virtual)DOM，不总是直接操作页面真实DOM。
- DOM Diffing算法，最小化页面重绘。
React的基本使用 {#react的基本使用}
相关的js库 {#相关的js库}
- react.js：React核心库。
- react-dom.js：提供操作DOM的react扩展库。
- babel.min.js：解析JSX语法代码转为JS代码的库。
基本使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello_react</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span> ></span><span class="javascript"> <span class="hljs-comment">/* 此处一定要写babel */</span>
<span class="hljs-comment">// 1.创建虚拟DOM</span>
<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">VDOM</span> = <span class="xml"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Hello,React<span class="hljs-tag"></<span class="hljs-name">h1</span>></span></span> <span class="hljs-comment">/* 此处一定不要写引号，因为不是字符串 */</span>
<span class="hljs-comment">// 2.渲染虚拟DOM到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="hljs-variable constant_">VDOM</span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</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>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> ></span><span class="javascript">
<span class="hljs-comment">//1.创建虚拟DOM</span>
<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">VDOM</span> = <span class="hljs-title class_">React</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'h1'</span>,{<span class="hljs-attr">id</span>:<span class="hljs-string">'title'</span>},<span class="hljs-title class_">React</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'span'</span>,{},<span class="hljs-string">'Hello,React'</span>))
<span class="hljs-comment">//2.渲染虚拟DOM到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="hljs-variable constant_">VDOM</span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
JSX方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用jsx创建虚拟DOM</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span> ></span><span class="javascript"> <span class="hljs-comment">/* 此处一定要写babel */</span>
<span class="hljs-comment">//1.创建虚拟DOM</span>
<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">VDOM</span> = ( <span class="hljs-comment">/* 此处一定不要写引号，因为不是字符串 */</span>
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"title"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>Hello,React<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">h1</span>></span></span>
)
<span class="hljs-comment">//2.渲染虚拟DOM到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="hljs-variable constant_">VDOM</span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
虚拟DOM与真实DOM {#虚拟dom与真实dom}
- 虚拟DOM对象最终都会被React转换为真实的DOM
- 我们编码时基本只需要操作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>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span> ></span><span class="javascript"> <span class="hljs-comment">/* 此处一定要写babel */</span>
<span class="hljs-comment">//1.创建虚拟DOM</span>
<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">VDOM</span> = ( <span class="hljs-comment">/* 此处一定不要写引号，因为不是字符串 */</span>
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"title"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>Hello,React<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">h1</span>></span></span>
)
<span class="hljs-comment">//2.渲染虚拟DOM到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="hljs-variable constant_">VDOM</span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">TDOM</span> = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'demo'</span>)
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'虚拟DOM'</span>,<span class="hljs-variable constant_">VDOM</span>);
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'真实DOM'</span>,<span class="hljs-variable constant_">TDOM</span>);
<span class="hljs-keyword">debugger</span>;
<span class="hljs-comment">// console.log(typeof VDOM);</span>
<span class="hljs-comment">// console.log(VDOM instanceof Object);</span>
<span class="hljs-comment">/*
关于虚拟DOM：
1.本质是Object类型的对象（一般对象）
2.虚拟DOM比较"轻"，真实DOM比较"重"，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
*/</span>
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</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>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span> ></span><span class="javascript">
<span class="hljs-keyword">const</span> myId = <span class="hljs-string">'LijInG'</span>
<span class="hljs-keyword">const</span> myData = <span class="hljs-string">'HeLlo,rEaCt'</span>
<span class="hljs-comment">//1.创建虚拟DOM</span>
<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">VDOM</span> = (
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"title"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">{myId.toLowerCase()}</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{color:</span>'<span class="hljs-attr">white</span>',<span class="hljs-attr">fontSize:</span>'<span class="hljs-attr">29px</span>'}}></span>{myData.toLowerCase()}<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"title"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">{myId.toUpperCase()}</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{color:</span>'<span class="hljs-attr">white</span>',<span class="hljs-attr">fontSize:</span>'<span class="hljs-attr">29px</span>'}}></span>{myData.toLowerCase()}<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>/></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
)
<span class="hljs-comment">//2.渲染虚拟DOM到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="hljs-variable constant_">VDOM</span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
<span class="hljs-comment">/*
jsx语法规则：
1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class，要用className。
4.内联样式，要用style={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
*/</span>
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
JSX练习 {#jsx练习}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsx小练习</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span> ></span><span class="javascript">
<span class="hljs-comment">/*
一定注意区分：【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}
*/</span>
<span class="hljs-comment">//模拟一些数据</span>
<span class="hljs-keyword">const</span> data = [<span class="hljs-string">'Angular'</span>,<span class="hljs-string">'React'</span>,<span class="hljs-string">'Vue'</span>]
<span class="hljs-comment">//1.创建虚拟DOM</span>
<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">VDOM</span> = (
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>前端js框架列表<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
{
data.map((item,index)=>{
return <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{index}</span>></span>{item}<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
})
}
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
)
<span class="hljs-comment">//2.渲染虚拟DOM到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="hljs-variable constant_">VDOM</span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</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>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//1.创建函数式组件</span>
<span class="hljs-keyword">function</span> <span class="hljs-title function_">MyComponent</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">this</span>); <span class="hljs-comment">//此处的this是undefined，因为babel编译后开启了严格模式</span>
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">h2</span>></span>我是用函数定义的组件(适用于【简单组件】的定义)<span class="hljs-tag"></<span class="hljs-name">h2</span>></span></span>
}
<span class="hljs-comment">//2.渲染组件到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">MyComponent</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
<span class="hljs-comment">/*
执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/</span>
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
类式组件 {#类式组件}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2_类式组件</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//1.创建类式组件</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span> {
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-comment">//render是放在哪里的？------ MyComponent的原型对象上，供实例使用。</span>
<span class="hljs-comment">//render中的this是谁？------ MyComponent的实例对象 <=> MyComponent组件实例对象。</span>
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'render中的this:'</span>,<span class="hljs-variable language_">this</span>);
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">h2</span>></span>我是用类定义的组件(适用于【复杂组件】的定义)<span class="hljs-tag"></<span class="hljs-name">h2</span>></span></span>
}
}
<span class="hljs-comment">//2.渲染组件到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">MyComponent</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
<span class="hljs-comment">/*
执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/</span>
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
注意 {#注意}
- 组件名必须首字母大写
- 虚拟DOM元素只能有一个根元素
- 虚拟DOM元素必须有结束标签
组件三大核心属性之state {#组件三大核心属性之state}
理解 {#理解}
- state是组件对象最重要的属性，值是对象(可以包含多个key-value的组合)
- 组件被称为"状态机"，通过更新组件的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>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//1.创建组件</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Weather</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
<span class="hljs-comment">//构造器调用几次？ ------------ 1次</span>
<span class="hljs-title function_">constructor</span>(<span class="hljs-params">props</span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'constructor'</span>);
<span class="hljs-variable language_">super</span>(props)
<span class="hljs-comment">//初始化状态</span>
<span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span> = {<span class="hljs-attr">isHot</span>:<span class="hljs-literal">false</span>,<span class="hljs-attr">wind</span>:<span class="hljs-string">'微风'</span>}
<span class="hljs-comment">//解决changeWeather中this指向问题</span>
<span class="hljs-variable language_">this</span>.<span class="hljs-property">changeWeather</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">changeWeather</span>.<span class="hljs-title function_">bind</span>(<span class="hljs-variable language_">this</span>)
}
<span class="hljs-comment">//render调用几次？ ------------ 1+n次 1是初始化的那次 n是状态更新的次数</span>
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'render'</span>);
<span class="hljs-comment">//读取状态</span>
<span class="hljs-keyword">const</span> {isHot,wind} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.changeWeather}</span>></span>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}<span class="hljs-tag"></<span class="hljs-name">h1</span>></span></span>
}
<span class="hljs-comment">//changeWeather调用几次？ ------------ 点几次调几次</span>
<span class="hljs-title function_">changeWeather</span>(<span class="hljs-params"></span>){
<span class="hljs-comment">//changeWeather放在哪里？ ------------ Weather的原型对象上，供实例使用</span>
<span class="hljs-comment">//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用</span>
<span class="hljs-comment">//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined</span>
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'changeWeather'</span>);
<span class="hljs-comment">//获取原来的isHot值</span>
<span class="hljs-keyword">const</span> isHot = <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>.<span class="hljs-property">isHot</span>
<span class="hljs-comment">//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。</span>
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>({<span class="hljs-attr">isHot</span>:!isHot})
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">this</span>);
<span class="hljs-comment">//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！</span>
<span class="hljs-comment">//this.state.isHot = !isHot //这是错误的写法</span>
}
}
<span class="hljs-comment">//2.渲染组件到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Weather</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
简写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>state简写方式</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//1.创建组件</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Weather</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
<span class="hljs-comment">//初始化状态</span>
state = {<span class="hljs-attr">isHot</span>:<span class="hljs-literal">false</span>,<span class="hljs-attr">wind</span>:<span class="hljs-string">'微风'</span>}
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-keyword">const</span> {isHot,wind} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.changeWeather}</span>></span>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}<span class="hljs-tag"></<span class="hljs-name">h1</span>></span></span>
}
<span class="hljs-comment">//自定义方法------------要用赋值语句的形式+箭头函数，this自动找到外层实例，这里的外层就是Weather实例</span>
changeWeather = <span class="hljs-function">()=></span>{
<span class="hljs-keyword">const</span> isHot = <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>.<span class="hljs-property">isHot</span>
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>({<span class="hljs-attr">isHot</span>:!isHot})
}
}
<span class="hljs-comment">//2.渲染组件到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Weather</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
组件三大核心属性之props {#组件三大核心属性之props}
理解 {#理解-1}
- 每个组件对象都会有props(properties的简写)属性
- 组件标签的所有属性都保存在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>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//创建组件</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Person</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-comment">// console.log(this);</span>
<span class="hljs-keyword">const</span> {name,age,sex} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>姓名：{name}<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>性别：{sex}<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>年龄：{age+1}<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></span>
)
}
}
<span class="hljs-comment">//渲染组件到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Person</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"jerry"</span> <span class="hljs-attr">age</span>=<span class="hljs-string">{19}</span> <span class="hljs-attr">sex</span>=<span class="hljs-string">"男"</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test1'</span>))
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Person</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tom"</span> <span class="hljs-attr">age</span>=<span class="hljs-string">{18}</span> <span class="hljs-attr">sex</span>=<span class="hljs-string">"女"</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test2'</span>))
<span class="hljs-keyword">const</span> p = {<span class="hljs-attr">name</span>:<span class="hljs-string">'老刘'</span>,<span class="hljs-attr">age</span>:<span class="hljs-number">18</span>,<span class="hljs-attr">sex</span>:<span class="hljs-string">'女'</span>}
<span class="hljs-comment">// console.log('@',...p);</span>
<span class="hljs-comment">// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))</span>
<span class="hljs-comment">// ...p 表示将p的所有属性通过props传递</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Person</span> {<span class="hljs-attr">...p</span>}/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test3'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</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>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入prop-types，用于对组件标签属性进行限制 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/prop-types.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//创建组件</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Person</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-comment">// console.log(this);</span>
<span class="hljs-keyword">const</span> {name,age,sex} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>
<span class="hljs-comment">//props是只读的</span>
<span class="hljs-comment">//this.props.name = 'jack' //此行代码会报错，因为props是只读的</span>
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>姓名：{name}<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>性别：{sex}<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>年龄：{age+1}<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></span>
)
}
}
<span class="hljs-comment">//对标签属性进行类型、必要性的限制</span>
<span class="hljs-title class_">Person</span>.<span class="hljs-property">propTypes</span> = {
<span class="hljs-attr">name</span>:<span class="hljs-title class_">PropTypes</span>.<span class="hljs-property">string</span>.<span class="hljs-property">isRequired</span>, <span class="hljs-comment">//限制name必传，且为字符串</span>
<span class="hljs-attr">sex</span>:<span class="hljs-title class_">PropTypes</span>.<span class="hljs-property">string</span>,<span class="hljs-comment">//限制sex为字符串</span>
<span class="hljs-attr">age</span>:<span class="hljs-title class_">PropTypes</span>.<span class="hljs-property">number</span>,<span class="hljs-comment">//限制age为数值</span>
<span class="hljs-attr">speak</span>:<span class="hljs-title class_">PropTypes</span>.<span class="hljs-property">func</span>,<span class="hljs-comment">//限制speak为函数</span>
}
<span class="hljs-comment">//指定默认标签属性值</span>
<span class="hljs-title class_">Person</span>.<span class="hljs-property">defaultProps</span> = {
<span class="hljs-attr">sex</span>:<span class="hljs-string">'男'</span>,<span class="hljs-comment">//sex默认值为男</span>
<span class="hljs-attr">age</span>:<span class="hljs-number">18</span> <span class="hljs-comment">//age默认值为18</span>
}
<span class="hljs-comment">//渲染组件到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Person</span> <span class="hljs-attr">name</span>=<span class="hljs-string">{100}</span> <span class="hljs-attr">speak</span>=<span class="hljs-string">{speak}/</span>></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test1'</span>))
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Person</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tom"</span> <span class="hljs-attr">age</span>=<span class="hljs-string">{18}</span> <span class="hljs-attr">sex</span>=<span class="hljs-string">"女"</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test2'</span>))
<span class="hljs-keyword">const</span> p = {<span class="hljs-attr">name</span>:<span class="hljs-string">'老刘'</span>,<span class="hljs-attr">age</span>:<span class="hljs-number">18</span>,<span class="hljs-attr">sex</span>:<span class="hljs-string">'女'</span>}
<span class="hljs-comment">// console.log('@',...p);</span>
<span class="hljs-comment">// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))</span>
<span class="hljs-comment">// ...p 表示将p的所有属性通过props传递</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Person</span> {<span class="hljs-attr">...p</span>}/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test3'</span>))
<span class="hljs-keyword">function</span> <span class="hljs-title function_">speak</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'我说话了'</span>);
}
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</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>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入prop-types，用于对组件标签属性进行限制 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/prop-types.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//创建组件</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Person</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
<span class="hljs-title function_">constructor</span>(<span class="hljs-params">props</span>){
<span class="hljs-comment">//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props</span>
<span class="hljs-comment">// console.log(props);</span>
<span class="hljs-variable language_">super</span>(props)
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'constructor'</span>,<span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>);
}
<span class="hljs-comment">//对标签属性进行类型、必要性的限制</span>
<span class="hljs-keyword">static</span> propTypes = {
<span class="hljs-attr">name</span>:<span class="hljs-title class_">PropTypes</span>.<span class="hljs-property">string</span>.<span class="hljs-property">isRequired</span>, <span class="hljs-comment">//限制name必传，且为字符串</span>
<span class="hljs-attr">sex</span>:<span class="hljs-title class_">PropTypes</span>.<span class="hljs-property">string</span>,<span class="hljs-comment">//限制sex为字符串</span>
<span class="hljs-attr">age</span>:<span class="hljs-title class_">PropTypes</span>.<span class="hljs-property">number</span>,<span class="hljs-comment">//限制age为数值</span>
}
<span class="hljs-comment">//指定默认标签属性值</span>
<span class="hljs-keyword">static</span> defaultProps = {
<span class="hljs-attr">sex</span>:<span class="hljs-string">'男'</span>,<span class="hljs-comment">//sex默认值为男</span>
<span class="hljs-attr">age</span>:<span class="hljs-number">18</span> <span class="hljs-comment">//age默认值为18</span>
}
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-comment">// console.log(this);</span>
<span class="hljs-keyword">const</span> {name,age,sex} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>
<span class="hljs-comment">//props是只读的</span>
<span class="hljs-comment">//this.props.name = 'jack' //此行代码会报错，因为props是只读的</span>
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>姓名：{name}<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>性别：{sex}<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>年龄：{age+1}<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></span>
)
}
}
<span class="hljs-comment">//渲染组件到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Person</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"jerry"</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test1'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</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>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入prop-types，用于对组件标签属性进行限制 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/prop-types.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//创建组件</span>
<span class="hljs-keyword">function</span> <span class="hljs-title function_">Person</span> (props){
<span class="hljs-keyword">const</span> {name,age,sex} = props
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>姓名：{name}<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>性别：{sex}<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>年龄：{age}<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></span>
)
}
<span class="hljs-title class_">Person</span>.<span class="hljs-property">propTypes</span> = {
<span class="hljs-attr">name</span>:<span class="hljs-title class_">PropTypes</span>.<span class="hljs-property">string</span>.<span class="hljs-property">isRequired</span>, <span class="hljs-comment">//限制name必传，且为字符串</span>
<span class="hljs-attr">sex</span>:<span class="hljs-title class_">PropTypes</span>.<span class="hljs-property">string</span>,<span class="hljs-comment">//限制sex为字符串</span>
<span class="hljs-attr">age</span>:<span class="hljs-title class_">PropTypes</span>.<span class="hljs-property">number</span>,<span class="hljs-comment">//限制age为数值</span>
}
<span class="hljs-comment">//指定默认标签属性值</span>
<span class="hljs-title class_">Person</span>.<span class="hljs-property">defaultProps</span> = {
<span class="hljs-attr">sex</span>:<span class="hljs-string">'男'</span>,<span class="hljs-comment">//sex默认值为男</span>
<span class="hljs-attr">age</span>:<span class="hljs-number">18</span> <span class="hljs-comment">//age默认值为18</span>
}
<span class="hljs-comment">//渲染组件到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Person</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"jerry"</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test1'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</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>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//创建组件</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
<span class="hljs-comment">//展示左侧输入框的数据</span>
showData = <span class="hljs-function">()=></span>{
<span class="hljs-keyword">const</span> {input1} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">refs</span>
<span class="hljs-title function_">alert</span>(input1.<span class="hljs-property">value</span>)
}
<span class="hljs-comment">//展示右侧输入框的数据</span>
showData2 = <span class="hljs-function">()=></span>{
<span class="hljs-keyword">const</span> {input2} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">refs</span>
<span class="hljs-title function_">alert</span>(input2.<span class="hljs-property">value</span>)
}
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-keyword">return</span>(
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"input1"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"点击按钮提示数据"</span>/></span><span class="hljs-symbol">&nbsp;</span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.showData}</span>></span>点我提示左侧的数据<span class="hljs-tag"></<span class="hljs-name">button</span>></span><span class="hljs-symbol">&nbsp;</span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"input2"</span> <span class="hljs-attr">onBlur</span>=<span class="hljs-string">{this.showData2}</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"失去焦点提示数据"</span>/></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
)
}
}
<span class="hljs-comment">//渲染组件到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Demo</span> <span class="hljs-attr">a</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">b</span>=<span class="hljs-string">"2"</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
回调函数形式的ref：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2_回调函数形式的ref</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//创建组件</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
<span class="hljs-comment">//展示左侧输入框的数据</span>
showData = <span class="hljs-function">()=></span>{
<span class="hljs-keyword">const</span> {input1} = <span class="hljs-variable language_">this</span>
<span class="hljs-title function_">alert</span>(input1.<span class="hljs-property">value</span>)
}
<span class="hljs-comment">//展示右侧输入框的数据</span>
showData2 = <span class="hljs-function">()=></span>{
<span class="hljs-keyword">const</span> {input2} = <span class="hljs-variable language_">this</span>
<span class="hljs-title function_">alert</span>(input2.<span class="hljs-property">value</span>)
}
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-keyword">return</span>(
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{c</span> =></span> this.input1 = c } type="text" placeholder="点击按钮提示数据"/><span class="hljs-symbol">&nbsp;</span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.showData}</span>></span>点我提示左侧的数据<span class="hljs-tag"></<span class="hljs-name">button</span>></span><span class="hljs-symbol">&nbsp;</span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">onBlur</span>=<span class="hljs-string">{this.showData2}</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{c</span> =></span> this.input2 = c } type="text" placeholder="失去焦点提示数据"/><span class="hljs-symbol">&nbsp;</span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
)
}
}
<span class="hljs-comment">//渲染组件到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Demo</span> <span class="hljs-attr">a</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">b</span>=<span class="hljs-string">"2"</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
回调ref中回调执行次数的问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3_回调ref中回调执行次数的问题</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//创建组件</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
state = {<span class="hljs-attr">isHot</span>:<span class="hljs-literal">false</span>}
showInfo = <span class="hljs-function">()=></span>{
<span class="hljs-keyword">const</span> {input1} = <span class="hljs-variable language_">this</span>
<span class="hljs-title function_">alert</span>(input1.<span class="hljs-property">value</span>)
}
changeWeather = <span class="hljs-function">()=></span>{
<span class="hljs-comment">//获取原来的状态</span>
<span class="hljs-keyword">const</span> {isHot} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>
<span class="hljs-comment">//更新状态</span>
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>({<span class="hljs-attr">isHot</span>:!isHot})
}
<span class="hljs-comment">// 这里的c是节点</span>
saveInput = <span class="hljs-function">(<span class="hljs-params">c</span>)=></span>{
<span class="hljs-variable language_">this</span>.<span class="hljs-property">input1</span> = c;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'@'</span>,c);
}
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-keyword">const</span> {isHot} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>
<span class="hljs-keyword">return</span>(
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h2</span>></span>今天天气很{isHot ? '炎热':'凉爽'}<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
{/*<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{(c)</span>=></span>{this.input1 = c;console.log('@',c);}} type="text"/><span class="hljs-tag"><<span class="hljs-name">br</span>/></span><span class="hljs-tag"><<span class="hljs-name">br</span>/></span>*/}
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{this.saveInput}</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>/></span><span class="hljs-tag"><<span class="hljs-name">br</span>/></span><span class="hljs-tag"><<span class="hljs-name">br</span>/></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.showInfo}</span>></span>点我提示输入的数据<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.changeWeather}</span>></span>点我切换天气<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
)
}
}
<span class="hljs-comment">//渲染组件到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Demo</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
createRef的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4_createRef</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//创建组件</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
<span class="hljs-comment">/*
React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是"专人专用"的
*/</span>
myRef = <span class="hljs-title class_">React</span>.<span class="hljs-title function_">createRef</span>()
myRef2 = <span class="hljs-title class_">React</span>.<span class="hljs-title function_">createRef</span>()
<span class="hljs-comment">//展示左侧输入框的数据</span>
showData = <span class="hljs-function">()=></span>{
<span class="hljs-title function_">alert</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">myRef</span>.<span class="hljs-property">current</span>.<span class="hljs-property">value</span>);
}
<span class="hljs-comment">//展示右侧输入框的数据</span>
showData2 = <span class="hljs-function">()=></span>{
<span class="hljs-title function_">alert</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">myRef2</span>.<span class="hljs-property">current</span>.<span class="hljs-property">value</span>);
}
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-keyword">return</span>(
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{this.myRef}</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"点击按钮提示数据"</span>/></span><span class="hljs-symbol">&nbsp;</span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.showData}</span>></span>点我提示左侧的数据<span class="hljs-tag"></<span class="hljs-name">button</span>></span><span class="hljs-symbol">&nbsp;</span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">onBlur</span>=<span class="hljs-string">{this.showData2}</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{this.myRef2}</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"失去焦点提示数据"</span>/></span><span class="hljs-symbol">&nbsp;</span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
)
}
}
<span class="hljs-comment">//渲染组件到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Demo</span> <span class="hljs-attr">a</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">b</span>=<span class="hljs-string">"2"</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
事件处理 {#事件处理}
-
通过onXxx属性指定事件处理函数(注意大小写)
-
- React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
-
- React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
-
-
通过event.target得到发生事件的DOM元素对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//创建组件</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
<span class="hljs-comment">/*
(1).通过onXxx属性指定事件处理函数(注意大小写)
a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 ------------------ 为了更好的兼容性
b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ------------------------为了高效
(2).通过event.target得到发生事件的DOM元素对象 ------------------------------不要过度使用ref
*/</span>
<span class="hljs-comment">//创建ref容器</span>
myRef = <span class="hljs-title class_">React</span>.<span class="hljs-title function_">createRef</span>()
myRef2 = <span class="hljs-title class_">React</span>.<span class="hljs-title function_">createRef</span>()
<span class="hljs-comment">//展示左侧输入框的数据</span>
showData = <span class="hljs-function">(<span class="hljs-params">event</span>)=></span>{
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(event.<span class="hljs-property">target</span>);
<span class="hljs-title function_">alert</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">myRef</span>.<span class="hljs-property">current</span>.<span class="hljs-property">value</span>);
}
<span class="hljs-comment">//展示右侧输入框的数据</span>
showData2 = <span class="hljs-function">(<span class="hljs-params">event</span>)=></span>{
<span class="hljs-title function_">alert</span>(event.<span class="hljs-property">target</span>.<span class="hljs-property">value</span>);
}
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-keyword">return</span>(
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{this.myRef}</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"点击按钮提示数据"</span>/></span><span class="hljs-symbol">&nbsp;</span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.showData}</span>></span>点我提示左侧的数据<span class="hljs-tag"></<span class="hljs-name">button</span>></span><span class="hljs-symbol">&nbsp;</span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">onBlur</span>=<span class="hljs-string">{this.showData2}</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"失去焦点提示数据"</span>/></span><span class="hljs-symbol">&nbsp;</span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
)
}
}
<span class="hljs-comment">//渲染组件到页面</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Demo</span> <span class="hljs-attr">a</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">b</span>=<span class="hljs-string">"2"</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
React收集表单数据 {#react收集表单数据}
受控组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>受控组件</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//创建组件</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Login</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
<span class="hljs-comment">//初始化状态</span>
state = {
<span class="hljs-attr">username</span>:<span class="hljs-string">''</span>, <span class="hljs-comment">//用户名</span>
<span class="hljs-attr">password</span>:<span class="hljs-string">''</span> <span class="hljs-comment">//密码</span>
}
<span class="hljs-comment">//保存用户名到状态中</span>
saveUsername = <span class="hljs-function">(<span class="hljs-params">event</span>)=></span>{
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>({<span class="hljs-attr">username</span>:event.<span class="hljs-property">target</span>.<span class="hljs-property">value</span>})
}
<span class="hljs-comment">//保存密码到状态中</span>
savePassword = <span class="hljs-function">(<span class="hljs-params">event</span>)=></span>{
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>({<span class="hljs-attr">password</span>:event.<span class="hljs-property">target</span>.<span class="hljs-property">value</span>})
}
<span class="hljs-comment">//表单提交的回调</span>
handleSubmit = <span class="hljs-function">(<span class="hljs-params">event</span>)=></span>{
event.<span class="hljs-title function_">preventDefault</span>() <span class="hljs-comment">//阻止表单提交</span>
<span class="hljs-keyword">const</span> {username,password} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>
<span class="hljs-title function_">alert</span>(<span class="hljs-string">`你输入的用户名是：<span class="hljs-subst">${username}</span>,你输入的密码是：<span class="hljs-subst">${password}</span>`</span>)
}
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-keyword">return</span>(
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">onSubmit</span>=<span class="hljs-string">{this.handleSubmit}</span>></span>
用户名：<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.saveUsername}</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"username"</span>/></span>
密码：<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.savePassword}</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"password"</span>/></span>
<span class="hljs-tag"><<span class="hljs-name">button</span>></span>登录<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span>
)
}
}
<span class="hljs-comment">//渲染组件</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Login</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
非受控组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非受控组件</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//创建组件</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Login</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
handleSubmit = <span class="hljs-function">(<span class="hljs-params">event</span>)=></span>{
event.<span class="hljs-title function_">preventDefault</span>() <span class="hljs-comment">//阻止表单提交</span>
<span class="hljs-keyword">const</span> {username,password} = <span class="hljs-variable language_">this</span>
<span class="hljs-title function_">alert</span>(<span class="hljs-string">`你输入的用户名是：<span class="hljs-subst">${username.value}</span>，你输入的密码是：<span class="hljs-subst">${password.value}</span>`</span>)
}
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-keyword">return</span>(
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">onSubmit</span>=<span class="hljs-string">{this.handleSubmit}</span>></span>
用户名：<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{c</span> =></span> this.username = c} type="text" name="username"/>
密码：<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{c</span> =></span> this.password = c} type="password" name="password"/>
<span class="hljs-tag"><<span class="hljs-name">button</span>></span>登录<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span>
)
}
}
<span class="hljs-comment">//渲染组件</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Login</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
函数柯里化 {#函数柯里化}
高阶函数-函数柯里化 {#高阶函数-函数柯里化}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高阶函数_函数柯里化</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//#region </span>
<span class="hljs-comment">/*
高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
常见的高阶函数有：Promise、setTimeout、arr.map()等等
函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
function sum(a){
return(b)=>{
return (c)=>{
return a+b+c
}
}
}
*/</span>
<span class="hljs-comment">//#endregion</span>
<span class="hljs-comment">//创建组件</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Login</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
<span class="hljs-comment">//初始化状态</span>
state = {
<span class="hljs-attr">username</span>:<span class="hljs-string">''</span>, <span class="hljs-comment">//用户名</span>
<span class="hljs-attr">password</span>:<span class="hljs-string">''</span> <span class="hljs-comment">//密码</span>
}
<span class="hljs-comment">//保存表单数据到状态中</span>
saveFormData = <span class="hljs-function">(<span class="hljs-params">dataType</span>)=></span>{
<span class="hljs-keyword">return</span> <span class="hljs-function">(<span class="hljs-params">event</span>)=></span>{
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>({[dataType]:event.<span class="hljs-property">target</span>.<span class="hljs-property">value</span>})
}
}
<span class="hljs-comment">//表单提交的回调</span>
handleSubmit = <span class="hljs-function">(<span class="hljs-params">event</span>)=></span>{
event.<span class="hljs-title function_">preventDefault</span>() <span class="hljs-comment">//阻止表单提交</span>
<span class="hljs-keyword">const</span> {username,password} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>
<span class="hljs-title function_">alert</span>(<span class="hljs-string">`你输入的用户名是：<span class="hljs-subst">${username}</span>,你输入的密码是：<span class="hljs-subst">${password}</span>`</span>)
}
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-keyword">return</span>(
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">onSubmit</span>=<span class="hljs-string">{this.handleSubmit}</span>></span>
用户名：<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.saveFormData(</span>'<span class="hljs-attr">username</span>')} <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"username"</span>/></span>
密码：<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.saveFormData(</span>'<span class="hljs-attr">password</span>')} <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"password"</span>/></span>
<span class="hljs-tag"><<span class="hljs-name">button</span>></span>登录<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span>
)
}
}
<span class="hljs-comment">//渲染组件</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Login</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
不用函数柯里化的实现 {#不用函数柯里化的实现}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2_不用函数柯里化的实现</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//创建组件</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Login</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
<span class="hljs-comment">//初始化状态</span>
state = {
<span class="hljs-attr">username</span>:<span class="hljs-string">''</span>, <span class="hljs-comment">//用户名</span>
<span class="hljs-attr">password</span>:<span class="hljs-string">''</span> <span class="hljs-comment">//密码</span>
}
<span class="hljs-comment">//保存表单数据到状态中</span>
saveFormData = <span class="hljs-function">(<span class="hljs-params">dataType,event</span>)=></span>{
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>({[dataType]:event.<span class="hljs-property">target</span>.<span class="hljs-property">value</span>})
}
<span class="hljs-comment">//表单提交的回调</span>
handleSubmit = <span class="hljs-function">(<span class="hljs-params">event</span>)=></span>{
event.<span class="hljs-title function_">preventDefault</span>() <span class="hljs-comment">//阻止表单提交</span>
<span class="hljs-keyword">const</span> {username,password} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>
<span class="hljs-title function_">alert</span>(<span class="hljs-string">`你输入的用户名是：<span class="hljs-subst">${username}</span>,你输入的密码是：<span class="hljs-subst">${password}</span>`</span>)
}
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-keyword">return</span>(
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">onSubmit</span>=<span class="hljs-string">{this.handleSubmit}</span>></span>
用户名：<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{event</span> =></span> this.saveFormData('username',event) } type="text" name="username"/>
密码：<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{event</span> =></span> this.saveFormData('password',event) } type="password" name="password"/>
<span class="hljs-tag"><<span class="hljs-name">button</span>></span>登录<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span>
)
}
}
<span class="hljs-comment">//渲染组件</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Login</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
组件的生命周期 {#组件的生命周期}
理解 {#理解-3}
- 组件从创建到死亡它会经历一些特定的阶段。
- React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
- 我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。
引出生命周期 {#引出生命周期}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1_引出生命周期</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//创建组件</span>
<span class="hljs-comment">//生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Life</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
state = {<span class="hljs-attr">opacity</span>:<span class="hljs-number">1</span>}
death = <span class="hljs-function">()=></span>{
<span class="hljs-comment">//卸载组件</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">unmountComponentAtNode</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
}
<span class="hljs-comment">//组件挂载完毕</span>
<span class="hljs-title function_">componentDidMount</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'componentDidMount'</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">timer</span> = <span class="hljs-built_in">setInterval</span>(<span class="hljs-function">() =></span> {
<span class="hljs-comment">//获取原状态</span>
<span class="hljs-keyword">let</span> {opacity} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>
<span class="hljs-comment">//减小0.1</span>
opacity -= <span class="hljs-number">0.1</span>
<span class="hljs-keyword">if</span>(opacity <= <span class="hljs-number">0</span>) opacity = <span class="hljs-number">1</span>
<span class="hljs-comment">//设置新的透明度</span>
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>({opacity})
}, <span class="hljs-number">200</span>);
}
<span class="hljs-comment">//组件将要卸载</span>
<span class="hljs-title function_">componentWillUnmount</span>(<span class="hljs-params"></span>){
<span class="hljs-comment">//清除定时器</span>
<span class="hljs-built_in">clearInterval</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">timer</span>)
}
<span class="hljs-comment">//初始化渲染、状态更新之后</span>
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'render'</span>);
<span class="hljs-keyword">return</span>(
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{opacity:this.state.opacity}}</span>></span>React学不会怎么办？<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.death}</span>></span>不活了<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
)
}
}
<span class="hljs-comment">//渲染组件</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Life</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
生命周期（旧） {#生命周期旧}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2_react生命周期(旧)</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">/*
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount() =====> 常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
2. 更新阶段: 由组件内部this.setSate()或父组件render触发
1. shouldComponentUpdate()
2. componentWillUpdate()
3. render() =====> 必须使用的一个
4. componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====> 常用
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
*/</span>
<span class="hljs-comment">//创建组件</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Count</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
<span class="hljs-comment">//构造器</span>
<span class="hljs-title function_">constructor</span>(<span class="hljs-params">props</span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Count---constructor'</span>);
<span class="hljs-variable language_">super</span>(props)
<span class="hljs-comment">//初始化状态</span>
<span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span> = {<span class="hljs-attr">count</span>:<span class="hljs-number">0</span>}
}
<span class="hljs-comment">//加1按钮的回调</span>
add = <span class="hljs-function">()=></span>{
<span class="hljs-comment">//获取原状态</span>
<span class="hljs-keyword">const</span> {count} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>
<span class="hljs-comment">//更新状态</span>
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>({<span class="hljs-attr">count</span>:count+<span class="hljs-number">1</span>})
}
<span class="hljs-comment">//卸载组件按钮的回调</span>
death = <span class="hljs-function">()=></span>{
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">unmountComponentAtNode</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
}
<span class="hljs-comment">//强制更新按钮的回调</span>
force = <span class="hljs-function">()=></span>{
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">forceUpdate</span>()
}
<span class="hljs-comment">//组件将要挂载的钩子</span>
<span class="hljs-title function_">componentWillMount</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Count---componentWillMount'</span>);
}
<span class="hljs-comment">//组件挂载完毕的钩子</span>
<span class="hljs-title function_">componentDidMount</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Count---componentDidMount'</span>);
}
<span class="hljs-comment">//组件将要卸载的钩子</span>
<span class="hljs-title function_">componentWillUnmount</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Count---componentWillUnmount'</span>);
}
<span class="hljs-comment">//控制组件更新的"阀门"</span>
<span class="hljs-title function_">shouldComponentUpdate</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Count---shouldComponentUpdate'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>
}
<span class="hljs-comment">//组件将要更新的钩子</span>
<span class="hljs-title function_">componentWillUpdate</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Count---componentWillUpdate'</span>);
}
<span class="hljs-comment">//组件更新完毕的钩子</span>
<span class="hljs-title function_">componentDidUpdate</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Count---componentDidUpdate'</span>);
}
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Count---render'</span>);
<span class="hljs-keyword">const</span> {count} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>
<span class="hljs-keyword">return</span>(
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h2</span>></span>当前求和为：{count}<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.add}</span>></span>点我+1<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.death}</span>></span>卸载组件<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.force}</span>></span>不更改任何状态中的数据，强制更新一下<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
)
}
}
<span class="hljs-comment">//父组件A</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">A</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
<span class="hljs-comment">//初始化状态</span>
state = {<span class="hljs-attr">carName</span>:<span class="hljs-string">'奔驰'</span>}
changeCar = <span class="hljs-function">()=></span>{
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>({<span class="hljs-attr">carName</span>:<span class="hljs-string">'奥拓'</span>})
}
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-keyword">return</span>(
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span>我是A组件<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.changeCar}</span>></span>换车<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">B</span> <span class="hljs-attr">carName</span>=<span class="hljs-string">{this.state.carName}/</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
)
}
}
<span class="hljs-comment">//子组件B</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">B</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
<span class="hljs-comment">//组件将要接收新的props的钩子</span>
<span class="hljs-title function_">componentWillReceiveProps</span>(<span class="hljs-params">props</span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'B---componentWillReceiveProps'</span>,props);
}
<span class="hljs-comment">//控制组件更新的"阀门"</span>
<span class="hljs-title function_">shouldComponentUpdate</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'B---shouldComponentUpdate'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>
}
<span class="hljs-comment">//组件将要更新的钩子</span>
<span class="hljs-title function_">componentWillUpdate</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'B---componentWillUpdate'</span>);
}
<span class="hljs-comment">//组件更新完毕的钩子</span>
<span class="hljs-title function_">componentDidUpdate</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'B---componentDidUpdate'</span>);
}
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'B---render'</span>);
<span class="hljs-keyword">return</span>(
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>我是B组件，接收到的车是:{this.props.carName}<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
)
}
}
<span class="hljs-comment">//渲染组件</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Count</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
生命周期（新） {#生命周期新}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3_react生命周期(新)</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/17.0.1/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/17.0.1/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/17.0.1/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">//创建组件</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Count</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
<span class="hljs-comment">/*
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
1. constructor()
2. getDerivedStateFromProps
3. render()
4. componentDidMount() =====> 常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
1. getDerivedStateFromProps
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate
5. componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====> 常用
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
*/</span>
<span class="hljs-comment">//构造器</span>
<span class="hljs-title function_">constructor</span>(<span class="hljs-params">props</span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Count---constructor'</span>);
<span class="hljs-variable language_">super</span>(props)
<span class="hljs-comment">//初始化状态</span>
<span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span> = {<span class="hljs-attr">count</span>:<span class="hljs-number">0</span>}
}
<span class="hljs-comment">//加1按钮的回调</span>
add = <span class="hljs-function">()=></span>{
<span class="hljs-comment">//获取原状态</span>
<span class="hljs-keyword">const</span> {count} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>
<span class="hljs-comment">//更新状态</span>
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>({<span class="hljs-attr">count</span>:count+<span class="hljs-number">1</span>})
}
<span class="hljs-comment">//卸载组件按钮的回调</span>
death = <span class="hljs-function">()=></span>{
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">unmountComponentAtNode</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
}
<span class="hljs-comment">//强制更新按钮的回调</span>
force = <span class="hljs-function">()=></span>{
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">forceUpdate</span>()
}
<span class="hljs-comment">//若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps</span>
<span class="hljs-keyword">static</span> <span class="hljs-title function_">getDerivedStateFromProps</span>(<span class="hljs-params">props,state</span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'getDerivedStateFromProps'</span>,props,state);
<span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>
}
<span class="hljs-comment">//在更新之前获取快照</span>
<span class="hljs-title function_">getSnapshotBeforeUpdate</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'getSnapshotBeforeUpdate'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-string">'atguigu'</span>
}
<span class="hljs-comment">//组件挂载完毕的钩子</span>
<span class="hljs-title function_">componentDidMount</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Count---componentDidMount'</span>);
}
<span class="hljs-comment">//组件将要卸载的钩子</span>
<span class="hljs-title function_">componentWillUnmount</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Count---componentWillUnmount'</span>);
}
<span class="hljs-comment">//控制组件更新的"阀门"</span>
<span class="hljs-title function_">shouldComponentUpdate</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Count---shouldComponentUpdate'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>
}
<span class="hljs-comment">//组件更新完毕的钩子</span>
<span class="hljs-title function_">componentDidUpdate</span>(<span class="hljs-params">preProps,preState,snapshotValue</span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Count---componentDidUpdate'</span>,preProps,preState,snapshotValue);
}
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Count---render'</span>);
<span class="hljs-keyword">const</span> {count} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>
<span class="hljs-keyword">return</span>(
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h2</span>></span>当前求和为：{count}<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.add}</span>></span>点我+1<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.death}</span>></span>卸载组件<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.force}</span>></span>不更改任何状态中的数据，强制更新一下<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
)
}
}
<span class="hljs-comment">//渲染组件</span>
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Count</span> <span class="hljs-attr">count</span>=<span class="hljs-string">{199}/</span>></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</body>`
`</html>`
`
重要的钩子 {#重要的钩子}
- render：初始化渲染或更新渲染调用
- componentDidMount：开启监听, 发送ajax请求
- componentWillUnmount：做一些收尾工作, 如: 清理定时器
即将废弃的钩子 {#即将废弃的钩子}
- componentWillMount
- componentWillReceiveProps
- 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>
<span class="hljs-comment"><!-- 引入react核心库 --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/17.0.1/react.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入react-dom，用于支持react操作DOM --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/17.0.1/react-dom.development.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- 引入babel，用于将jsx转为js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../js/17.0.1/babel.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-keyword">class</span> <span class="hljs-title class_">NewsList</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span>{
state = {<span class="hljs-attr">newsArr</span>:[]}
<span class="hljs-title function_">componentDidMount</span>(<span class="hljs-params"></span>){
<span class="hljs-built_in">setInterval</span>(<span class="hljs-function">() =></span> {
<span class="hljs-comment">//获取原状态</span>
<span class="hljs-keyword">const</span> {newsArr} = <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>
<span class="hljs-comment">//模拟一条新闻</span>
<span class="hljs-keyword">const</span> news = <span class="hljs-string">'新闻'</span>+ (newsArr.<span class="hljs-property">length</span>+<span class="hljs-number">1</span>)
<span class="hljs-comment">//更新状态</span>
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>({<span class="hljs-attr">newsArr</span>:[news,...newsArr]})
}, <span class="hljs-number">1000</span>);
}
<span class="hljs-title function_">getSnapshotBeforeUpdate</span>(<span class="hljs-params"></span>){
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">refs</span>.<span class="hljs-property">list</span>.<span class="hljs-property">scrollHeight</span>
}
<span class="hljs-title function_">componentDidUpdate</span>(<span class="hljs-params">preProps,preState,height</span>){
<span class="hljs-variable language_">this</span>.<span class="hljs-property">refs</span>.<span class="hljs-property">list</span>.<span class="hljs-property">scrollTop</span> += <span class="hljs-variable language_">this</span>.<span class="hljs-property">refs</span>.<span class="hljs-property">list</span>.<span class="hljs-property">scrollHeight</span> - height
}
<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>){
<span class="hljs-keyword">return</span>(
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"list"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"list"</span>></span>
{
this.state.newsArr.map((n,index)=>{
return <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{index}</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"news"</span>></span>{n}<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
})
}
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
)
}
}
<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">NewsList</span>/></span></span>,<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'test'</span>))
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</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更新 ==> 界面效果没问题, 但效率低。
2. 如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。
3. 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，
仅用于渲染列表用于展示，使用index作为key是没有问题的。
3. 开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果确定只是简单的展示数据，用index也是可以的。
\*/
/*
慢动作回放----使用index索引值作为key
初始数据：
{id:1,name:'小张',age:18},
{id:2,name:'小李',age:19},
初始的虚拟DOM：
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">key</span>=<span class="hljs-string">0</span>></span>小张---18<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>/></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">key</span>=<span class="hljs-string">1</span>></span>小李---19<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>/></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
更新后的数据：
{id:3,name:'小王',age:20},
{id:1,name:'小张',age:18},
{id:2,name:'小李',age:19},
更新数据后的虚拟DOM：
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">key</span>=<span class="hljs-string">0</span>></span>小王---20<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>/></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">key</span>=<span class="hljs-string">1</span>></span>小张---18<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>/></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">key</span>=<span class="hljs-string">2</span>></span>小李---19<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>/></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
-----------------------------------------------------------------
慢动作回放----使用id唯一标识作为key
初始数据：
{id:1,name:'小张',age:18},
{id:2,name:'小李',age:19},
初始的虚拟DOM：
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">key</span>=<span class="hljs-string">1</span>></span>小张---18<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>/></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">key</span>=<span class="hljs-string">2</span>></span>小李---19<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>/></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
更新后的数据：
{id:3,name:'小王',age:20},
{id:1,name:'小张',age:18},
{id:2,name:'小李',age:19},
更新数据后的虚拟DOM：
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">key</span>=<span class="hljs-string">3</span>></span>小王---20<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>/></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">key</span>=<span class="hljs-string">1</span>></span>小张---18<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>/></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">key</span>=<span class="hljs-string">2</span>></span>小李---19<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>/></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
*/
class Person extends React.Component{
state = {
persons:[
{id:1,name:'小张',age:18},
{id:2,name:'小李',age:19},
]
}
add = ()=>{
const {persons} = this.state
const p = {id:persons.length+1,name:'小王',age:20}
this.setState({persons:[p,...persons]})
}
render(){
return (
<span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h2</span>></span>展示人员信息<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.add}</span>></span>添加一个小王<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h3</span>></span>使用index（索引值）作为key<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
{
this.state.persons.map((personObj,index)=>{
return <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{index}</span>></span>{personObj.name}---{personObj.age}<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>/></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
})
}
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-name">hr</span>/></span>
<span class="hljs-tag"><<span class="hljs-name">hr</span>/></span>
<span class="hljs-tag"><<span class="hljs-name">h3</span>></span>使用id（数据的唯一标识）作为key<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
{
this.state.persons.map((personObj)=>{
return <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{personObj.id}</span>></span>{personObj.name}---{personObj.age}<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>/></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
})
}
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
)
}
}
ReactDOM.render(<span class="hljs-tag"><<span class="hljs-name">Person</span>/></span>,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库的支持)
后续更新！
