React学习笔记——基本知识点

      <!-- /\* Font Definitions \*/ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 680460288 22 0 262145 0;} @font-face {font-family:黑体; panose-1:2 1 6 9 6 1 1 1 1 1; mso-font-alt:SimHei; mso-font-charset:134; mso-generic-font-family:modern; mso-font-pitch:fixed; mso-font-signature:-2147482945 953122042 22 0 262145 0;} @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:0; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:3 0 0 0 1 0;} @font-face {font-family:"\\@宋体"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 680460288 22 0 262145 0;} @font-face {font-family:"\\@黑体"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:modern; mso-font-pitch:fixed; mso-font-signature:-2147482945 953122042 22 0 262145 0;} /\* Style Definitions \*/ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; line-height:23.0pt; mso-line-height-rule:exactly; mso-pagination:none; font-size:12.0pt; font-family:"Times New Roman",serif; mso-fareast-font-family:宋体; mso-font-kerning:1.0pt;} h1 {mso-style-unhide:no; mso-style-qformat:yes; mso-style-link:"标题 1 字符"; mso-style-next:章节正文; margin-top:4.0pt; margin-right:0cm; margin-bottom:2.5pt; margin-left:-1638.35pt; mso-para-margin-top:.8gd; mso-para-margin-right:0cm; mso-para-margin-bottom:.5gd; mso-para-margin-left:-1638.35pt; text-align:center; text-indent:1638.35pt; page-break-before:always; mso-pagination:lines-together; page-break-after:avoid; mso-outline-level:1; mso-list:l0 level1 lfo1; font-size:18.0pt; mso-bidi-font-size:22.0pt; font-family:"Times New Roman",serif; mso-fareast-font-family:黑体; mso-font-kerning:22.0pt; font-weight:normal; mso-bidi-font-weight:bold;} h2 {mso-style-qformat:yes; mso-style-link:"标题 2 字符"; mso-style-next:章节正文; margin-top:8.15pt; margin-right:0cm; margin-bottom:8.15pt; margin-left:-1638.35pt; mso-para-margin-top:.5gd; mso-para-margin-right:0cm; mso-para-margin-bottom:.5gd; mso-para-margin-left:-1638.35pt; text-align:justify; text-justify:inter-ideograph; text-indent:1638.35pt; mso-pagination:lines-together; page-break-after:avoid; mso-outline-level:2; mso-list:l0 level2 lfo1; font-size:14.0pt; mso-bidi-font-size:16.0pt; font-family:"Times New Roman",serif; mso-fareast-font-family:黑体; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; mso-font-kerning:1.0pt; font-weight:normal; mso-bidi-font-weight:bold;} h3 {mso-style-qformat:yes; mso-style-link:"标题 3 字符"; mso-style-next:章节正文; margin-top:0cm; margin-right:0cm; margin-bottom:0cm; margin-left:-1638.35pt; margin-bottom:.0001pt; mso-para-margin-top:.5gd; mso-para-margin-right:0cm; mso-para-margin-bottom:.5gd; mso-para-margin-left:-1638.35pt; mso-para-margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; text-indent:1638.35pt; mso-pagination:lines-together; page-break-after:avoid; mso-outline-level:3; mso-list:l0 level3 lfo1; tab-stops:list 1.0cm; font-size:12.0pt; mso-bidi-font-size:16.0pt; font-family:"Times New Roman",serif; mso-fareast-font-family:黑体; mso-font-kerning:1.0pt; font-weight:normal; mso-bidi-font-weight:bold;} span.1 {mso-style-name:"标题 1 字符"; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:"标题 1"; mso-ansi-font-size:18.0pt; mso-bidi-font-size:22.0pt; font-family:"Times New Roman",serif; mso-ascii-font-family:"Times New Roman"; mso-fareast-font-family:黑体; mso-hansi-font-family:"Times New Roman"; mso-bidi-font-family:"Times New Roman"; mso-font-kerning:22.0pt; mso-bidi-font-weight:bold;} span.2 {mso-style-name:"标题 2 字符"; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:"标题 2"; mso-ansi-font-size:14.0pt; mso-bidi-font-size:16.0pt; font-family:"Times New Roman",serif; mso-ascii-font-family:"Times New Roman"; mso-fareast-font-family:黑体; mso-hansi-font-family:"Times New Roman"; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:major-bidi; mso-bidi-font-weight:bold;} span.3 {mso-style-name:"标题 3 字符"; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:"标题 3"; mso-ansi-font-size:12.0pt; mso-bidi-font-size:16.0pt; font-family:"Times New Roman",serif; mso-ascii-font-family:"Times New Roman"; mso-fareast-font-family:黑体; mso-hansi-font-family:"Times New Roman"; mso-bidi-font-family:"Times New Roman"; mso-bidi-font-weight:bold;} p.a, li.a, div.a {mso-style-name:章节正文; mso-style-unhide:no; mso-style-qformat:yes; mso-style-link:"章节正文 Char"; margin:0cm; margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; text-indent:10.0pt; mso-char-indent-count:2.0; line-height:23.0pt; mso-line-height-rule:exactly; mso-pagination:none; font-size:12.0pt; font-family:"Times New Roman",serif; mso-fareast-font-family:宋体; mso-font-kerning:1.0pt;} span.Char {mso-style-name:"章节正文 Char"; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:章节正文; mso-ansi-font-size:12.0pt; mso-bidi-font-size:12.0pt; font-family:"Times New Roman",serif; mso-ascii-font-family:"Times New Roman"; mso-fareast-font-family:宋体; mso-hansi-font-family:"Times New Roman"; mso-bidi-font-family:"Times New Roman";} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-bidi-font-size:11.0pt; font-family:DengXian; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} /\* Page Definitions \*/ @page {mso-page-border-surround-header:no; mso-page-border-surround-footer:no;} @page WordSection1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.WordSection1 {page:WordSection1;} /\* List Definitions \*/ @list l0 {mso-list-id:1469318746; mso-list-template-ids:-1916906158;} @list l0:level1 {mso-level-style-link:"标题 1"; mso-level-suffix:space; mso-level-text:%1; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:-1638.35pt; text-indent:1638.35pt;} @list l0:level2 {mso-level-style-link:"标题 2"; mso-level-suffix:space; mso-level-text:"%1\\.%2"; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:-1638.35pt; text-indent:1638.35pt; color:black; mso-themecolor:text1;} @list l0:level3 {mso-level-style-link:"标题 3"; mso-level-text:"%1\\.%2\\.%3"; mso-level-tab-stop:205.55pt; mso-level-number-position:left; margin-left:-1461.15pt; text-indent:1638.35pt;} @list l0:level4 {mso-level-text:"%1\\.%2\\.%3\\.%4"; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:99.2pt; text-indent:-35.4pt;} @list l0:level5 {mso-level-text:"%1\\.%2\\.%3\\.%4\\.%5"; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:127.55pt; text-indent:-42.5pt;} @list l0:level6 {mso-level-text:"%1\\.%2\\.%3\\.%4\\.%5\\.%6"; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:163.0pt; text-indent:-2.0cm;} @list l0:level7 {mso-level-text:"%1\\.%2\\.%3\\.%4\\.%5\\.%6\\.%7"; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:191.35pt; text-indent:-63.8pt;} @list l0:level8 {mso-level-text:"%1\\.%2\\.%3\\.%4\\.%5\\.%6\\.%7\\.%8"; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:219.7pt; text-indent:-70.9pt;} @list l0:level9 {mso-level-text:"%1\\.%2\\.%3\\.%4\\.%5\\.%6\\.%7\\.%8\\.%9"; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:255.1pt; text-indent:-85.0pt;} ol {margin-bottom:0cm;} ul {margin-bottom:0cm;} -->   

1.1 创建一个react项目

首先要安装node.js

运行node -v和npm -v 来判断node.js是否安装成功

然后利用命令

npx create-react-app appname 创建你的项目

cd appname 进入项目

npm start 开始项目

1.2 组件component

React中的组件就是页面中的一个一个不同的部分，创建一个组件非常简单，只需要让创建一个class,并让该class继承React.Component就可以，每个组件都必须有个render函数，该函数决定该组件在网页页面上是如何渲染的。自定义的组件名字以大写开头，HTML原生的组件或者标签则是以小写开头。

1.3 组件的监听事件

给button或者input等元素添加非原生的监听事件，比如onClick或者onChange等，后面紧跟一个函数，比如handleClick,利用onClick={this.handleClick.bind(this)}来引用该handleClick函数，该函数需要在组件中去单独实现。

这里为何要bind(this)呢？在handleClick之前的this代表的是整个大组件的环境，然后假如我们在handleClick函数中用到了this,这个this则是指的是一个小组件的环境，也就是这个this不是全局的this,而是局部的this,比如这里该函数是用于button这个小组件，那么这个this也仅仅指的是button的环境。因此通过bind(this)使得函数中的this指的是整个大组件的环境。

在React中，可以通过this.state.variable读取值，但是不可以直接通过给this.state.variable赋值来更改值。

1.4 组件的state

组件的state存储整个组件的数据信息，可以在constructor(props)函数中进行初始化，该函数必须要有super(props)语句用于继承父类的属性信息。对state的更改不要直接通过this.state进行更改，而应该利用this.setState({})函数进行修改。

[…this.state.list]是一个拓展展开式，它创建了一个列表，里面的内容是list中的内容，[…this.state.list,newConent]则表示在该列表后添加一个新的内容。

之所以用列表展开式而不直接用this.state.list是因为用列表展开式相当于创建了一个原来列表list的副本，然后我们这个副本进行更改，最后再将副本赋值给变量进行更新。通过创建副本来修改变量是一种良好的代码写作方式，在后续的测试中也会带来很大的优点，因此，推荐采用这种方式，而不是直接操作this.state.list.

1.5 父子组件和props

React中通过嵌套的关系就形成了父子组件.

父组件向子组件传递值。一个父组件可以向子组件传递一个变量，传递的形式就是在子组件中添加属性，比如<li content={item}/>就像li组件传递了一个content的属性，然后子组件通过this.props.content来获得该属性的内容。

子组件向父组件传递值。子组件通过调用父组件传递过来的函数来传递值给父组件。首先在父组件中创建函数fun(para),参数就是子组件要向父组件传递的值。然后父组件将该函数通过属性传递给子组件，在子组件中调用该函数，函数的参数就是子组件要传给父组件的值。