2020-web前端-react学习笔记-01

一时失言乱红尘 2023-02-16 04:02 1阅读 0赞

React 构建用户界面的JavaScript库，主要用于构建UI界面。Instagram，2013年开源。

## 特点： ##

1.  声明式的设计
2.  高效，采用虚拟DOM来实现DOM的渲染，最大限度的减少DOM的操作。
3.  灵活，跟其他库灵活搭配使用。
4.  JSX，俗称JS里面写HTML，JavaScript语法的扩展。
5.  组件化，模块化。代码容易复用，2016年之前大型项目非常喜欢react
6.  单向数据流。没有实现数据的双向绑定。数据-》视图-》事件-》数据

## 创建项目 ##

1、通过script引入使用，仅用于学习调试使用

<table style="width:568px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> <pre style="margin-left:0cm;">&lt;script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"&gt;&lt;/script&gt;</pre> <pre style="margin-left:0cm;">&lt;script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"&gt;</pre> <pre style="margin-left:0cm;">&lt;/script&gt;</pre> &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

1.  通过react的脚手架，创建项目进行开发，部署。

<table style="width:568px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> &nbsp; 
 <ol> 
 <li>安装脚手架<a href="https://react.docschina.org/docs/create-a-new-react-app.html#create-react-app" rel="nofollow">Create React App</a>。</li> 
 </ol>cnpm install -g create-react-app 
 <ol> 
 <li>创建项目</li> 
 </ol>create-react-app 01reactapp(项目名称可以自定义) &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

## React元素渲染 ##

案例使用：

<table style="width:568px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> //实现页面时刻的显示 &nbsp; function&nbsp;clock(){ &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;time&nbsp;=&nbsp;new&nbsp;Date().toLocaleTimeString() &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;element&nbsp;=&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;现在的时间是{ time}&nbsp;&lt;/h1&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;这是副标题&lt;/h2&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;) &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;root&nbsp;=&nbsp;document.querySelector('#root'); &nbsp;&nbsp;&nbsp;&nbsp;ReactDOM.render(element,root) } &nbsp; clock() &nbsp; setInterval(clock,1000) &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

函数式组件渲染

<table style="width:568px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> function&nbsp;Clock(props){ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;现在的时间是{ props.date.toLocaleTimeString()}&nbsp;&lt;/h1&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;这是函数式组件开发&lt;/h2&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;) } &nbsp; function&nbsp;run(){ &nbsp;&nbsp;&nbsp;&nbsp;ReactDOM.render( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Clock&nbsp;date={new&nbsp;Date()}&nbsp;/&gt;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector('#root') &nbsp;&nbsp;&nbsp;&nbsp;) } &nbsp; setInterval(run,1000) &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

## React Jsx ##

优点：

1.  JSX执行更快，编译为JavaScript代码时进行优化
2.  类型更安全，编译过程如果出错就不能编译，及时发现错误
3.  JSX编写模板更加简单快速。（不要跟VUE比）

注意：

1.  JSX必须要有根节点。
2.  正常的普通HTML元素要小写。如果是大写，默认认为是组件。

### JSX表达式 ###

1.  由HTML元素构成
2.  中间如果需要插入变量用\{\}
3.  \{\}中间可以使用表达式
4.  \{\}中间表达式中可以使用JSX对象
5.  属性和html内容一样都是用\{\}来插入内容

案例

<table style="width:568px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> import&nbsp;React&nbsp;from&nbsp;'react'; import&nbsp;ReactDOM&nbsp;from&nbsp;'react-dom'; import&nbsp;'./App.css' &nbsp; let&nbsp;time&nbsp;=&nbsp;new&nbsp;Date().toLocaleTimeString() let&nbsp;str&nbsp;=&nbsp;'当前时间是：' let&nbsp;element&nbsp;=&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;helloworld&lt;/h1&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;{ str+time}&lt;/h2&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; ) &nbsp; console.log(element) &nbsp; let&nbsp;man&nbsp;=&nbsp;'发热'; let&nbsp;element2&nbsp;=&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;今天是否隔离&lt;/h1&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;{ man=="发热"?&lt;button&gt;隔离&lt;/button&gt;:"躺床上"}&lt;/h2&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; ) &nbsp; //let&nbsp;man&nbsp;=&nbsp;'发热'; let&nbsp;element4&nbsp;=&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;横着躺&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;竖着躺&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; ) man&nbsp;=&nbsp;'正常' let&nbsp;element3&nbsp;=&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;今天是否隔离&lt;/h1&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;{ man=="发热"?&lt;button&gt;隔离&lt;/button&gt;:element4}&lt;/h2&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; ) &nbsp; let&nbsp;color&nbsp;=&nbsp;'bgRed' let&nbsp;logo&nbsp;=&nbsp;'https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png' //HTML的样式类名要写className,因为class在js当中是关键词 let&nbsp;element5&nbsp;=&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;className={ color}&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;src={ logo}&nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;红色的背景颜色 &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp; ) &nbsp; ReactDOM.render( &nbsp;&nbsp;&nbsp;&nbsp;element5, &nbsp;&nbsp;&nbsp;&nbsp;document.getElementById('root') &nbsp; ) &nbsp; &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

## JSX\_style 样式 ##

1.  Class，style中，不可以存在多个class属性

<table style="width:568px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> &lt;div class=’abc’&nbsp; class={‘active’}&gt; 错误的表示 </td> 
 </tr> 
 </tbody> 
</table>

1.  style样式中，如果存在多个单词的属性组合，第二个单词开始，首字母大写。或者用引号引起来，否则会报错。

1.  多个类共存的操作

<table style="width:568px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> let&nbsp;element2&nbsp;=&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&nbsp;className={ "abc&nbsp;"+classStr}&gt;helloworld&lt;/h1&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; ) &nbsp; &nbsp; let&nbsp;classStr2&nbsp;=&nbsp;['abc2','redBg2'].join("&nbsp;") let&nbsp;element3&nbsp;=&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ /*&nbsp;这里写注释&nbsp;*/} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&nbsp;className={ classStr2}&nbsp;style={ exampleStyle}&gt;helloworld&lt;/h1&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; ) &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

1.  注释

必须在括号的表达式内书写，否则报错：\{ /\* 这里写注释 \*/\}

# #

## React组件 ##

函数式组件与类组件的区别和使用，函数式比较简单，一般用于静态没有交互事件内容的组件页面。类组件，一般又称为动态组件，那么一般会有交互或者数据修改的操作。

1.  函数式组件

<table style="width:568px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> //函数式组件 function&nbsp;Childcom(props){ &nbsp;&nbsp;&nbsp;&nbsp;console.log(props) &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;title&nbsp;=&nbsp;&lt;h2&gt;我是副标题&lt;/h2&gt; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;weather&nbsp;=&nbsp;props.weather &nbsp;&nbsp;&nbsp;&nbsp;//条件判断&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;isGo&nbsp;=&nbsp;weather=='下雨'&nbsp;?"不出门":"出门" &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;函数式组件helloworld&lt;/h1&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ title} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;是否出门？ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;{ isGo}&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;) } &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

1.  类组件

<table style="width:568px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> //类组件定义 class&nbsp;HelloWorld&nbsp;extends&nbsp;React.Component{ &nbsp;&nbsp;&nbsp;&nbsp;render(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(this) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;类组件定义HELLOWORLD&lt;/h1&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;hello:{this.props.name}&lt;/h1&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Childcom&nbsp;weather={this.props.weather}&nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;) &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp; } &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

3、复合组件：组件中又有其他的组件，复合组件中既可以有类组件又可以有函数组件。

<table style="width:568px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> import&nbsp;React&nbsp;from&nbsp;'react'; import&nbsp;ReactDOM&nbsp;from&nbsp;'react-dom'; import&nbsp;'./04style.css'; //函数式组件 function&nbsp;Childcom(props){ &nbsp;&nbsp;&nbsp;&nbsp;console.log(props) &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;title&nbsp;=&nbsp;&lt;h2&gt;我是副标题&lt;/h2&gt; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;weather&nbsp;=&nbsp;props.weather &nbsp;&nbsp;&nbsp;&nbsp;//条件判断&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;isGo&nbsp;=&nbsp;weather=='下雨'&nbsp;?"不出门":"出门" &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;函数式组件helloworld&lt;/h1&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ title} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;是否出门？ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;{ isGo}&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;) } &nbsp; //类组件定义 class&nbsp;HelloWorld&nbsp;extends&nbsp;React.Component{ &nbsp;&nbsp;&nbsp;&nbsp;render(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(this) //返回的都是JSX对象 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;类组件定义HELLOWORLD&lt;/h1&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;hello:{this.props.name}&lt;/h1&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Childcom&nbsp;weather={this.props.weather}&nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;) &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp; } &nbsp; //&nbsp;ReactDOM.render( //&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Childcom&nbsp;weather="出太阳"&nbsp;/&gt;, //&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector('#root') //&nbsp;) &nbsp; ReactDOM.render( &nbsp;&nbsp;&nbsp;&nbsp;&lt;HelloWorld&nbsp;name="老陈"&nbsp;weather="下雨"&nbsp;/&gt;, &nbsp;&nbsp;&nbsp;&nbsp;document.querySelector('#root') ) &nbsp; &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

## React State ##

相当于VUE的DATA,但是使用方式跟VUE不一致。