React作为招聘求职提到最多的框架，让我不禁想一探究竟。正好以React为例，深入了解下框架的概念。

因为是在学习过程中的笔记，所以内容稍微杂乱一些。

之前讲Node.js的文章中也提到了包的概念。React就是一个包，需要依赖Node.js平台来安装。一般是进行全局安装，这样在我们自定义的文件路径下，运行React命令就可以新建一个React项目模板。其实就是一个文件夹，文件夹里面包含一个包所需要的各个组件，Package.jason、Node_module、src等。通过运行这个项目，就可以打开一个项目模板中做好的网页了。如果要发布这个网页，那么通过购买域名、租云服务器，将域名和服务器绑定后，把React项目文件夹上传到云服务器即可。

框架的作用不止是帮我们生成一个项目的文件夹等，还帮我们默认实现了一些功能，省去了我们编程的时候一些麻烦。一些通用性的操作代码直接整合在框架内，我们只需要用简单的几行代码，就可以让框架识别，并转化为浏览器能够识别的JS代码。对于React框架，称之为JSX语法。

React框架可以通过JSX语法，将html、css以及js集中到一个文件中，非常的强大。在Public文件夹中的index.html是网页文件，与之对应的需要在src文件夹中有一个index.js文件，用来定义与网页元素对应的代码内容。具体需要实现什么样的网页样式或者功能，就需要我们自己去编辑这个index.js文件了。

总体来说，JavaScript就相当于linux系统，我们在上面也可以实现各种功能，框架就类似Windows系统，可以让使用计算机的门槛更低，功能实现更方便。

React框架通过组件的形式构件网页。将网页的每一块元素（一个滚动条、一个列表等）的html、css和js都合并为一个组件，放在src文件夹内。组件需要继承React.component类。通过index.js引用组件，并赋给对应的elementID即可。这样结构清晰，易于维护。导入的组件需要首字母大写。

还有一种是函数式组件，相比类组件，代码要简单一些。但是函数式组件没有状态组件，不能实现计数等功能，需要结合hook来使用。目前用函数式组件的比较多。

组件之内可以嵌套组件，用来实现不同的内容。对于组件的样式，可以在组件js文件内直接定义，也可以通过引入外部css文件来定义（在js元素中className=’’来调用）。React官方推荐是在组件js文件内写好，这样一个组件就是一个整体，包含了css的内容，复用更方便。

对于组件中的函数，可以在render中直接写，也可以在class外部定义函数，然后在class内调用，这个时候，如果函数名后面不加括号，就是被动执行，被调用的时候才执行。如果加了括号，就会主动执行了。

对于this的研用法，需要分辨是哪个部分调用，那么this就指向哪一部分。如果想要指定this，那么需要调用bind。bind、apply和call可以指定this，通过在一个函数后面加.call（）或者.apply（）可以指定this，并且自动执行函数。bind的区别在于不会自动执行函数，需要手动加括号执行函数。如果一个函数是通过箭头（）=>定义的话，那么函数中的this就会指向外部的this，就不存在this未定义的情况。否则，函数内的this就只能指向函数，需要结合bind来修正this的指向。

ref可以将input box里的值传递给元素，建议通过新建ref并赋值给变量，这样可以防止ref的名称冲突。

React的状态变量，每一次改变后React都会自动更新前端显示。通过修改普通的变量的值，React是无法自动感知的。State需要定义在render外部，在render中通过this.state.text来访问。状态变量的修改需要使用setState方法，不能直接赋值。就算是要增删元素，也需要先把state.list先赋值给一个变量，对变量进行修改后，再通过setState来对状态变量进行修改。

对于React的列表显示，可以通过Map映射的方式将列表的每个元素映射成一个指定的格式，显示在web中。

对于React中的列表，如果需要对列表进行操作（增删、修改），并实时更新，那么需要用到Key值来提高性能。React通过虚拟DOM来减少对DOM的操作，从而节省内存，提高性能。通过给列表的每个元素一个唯一的Key值，在将列表对应到虚拟DOM的时候，就可以逐个Key值进行比较，如果Key值对应的列表元素变化了，那么就生成一个修改补丁，作用到DOM中去就可以了。如果不用Key值，而是挨个去对比列表数据，那么如果从第二行插入一个数值，React就需要对第二行往后的所有元素都进行修改。通过Key值的方法，只需要一步操作就可以了。而至于React怎么生成补丁去修改DOM，这个就不是我们需要关心的事了，React这个框架会帮我们实现这个步骤。

对于条件渲染，可以通过两种方式。一个通过{条件？真，假}的三目运算，二是通过&&操作符，只有当&&前面的条件成立了，才会执行后面的语句。

每个组件中都包含一个render，用来渲染组件对应的web部分的内容。在render中，如果需要调用函数，可以把函数用大括号{}包裹起来。

对于render中要显示的内容，一般通过Map来映射，而如何生成包含要显示的内容的数组，需要在render外部通过函数来实现。

对于一个输入框（input），可以通过onInput={this.handleInput}来实现当在输入框内输入内容的时候触发函数。函数的输入参数可以为event，event.target.value即为我们在输入框内输入的参数。

以上的内容，可以从无到有创建一个网页，在网页中显示列表。并可以对列表进行模糊搜索，显示搜索的结果。

—————————————————————————————————————————

Github:

https://github.com/CAOYUhhu

Twitter:

https://twitter.com/james_tsao21

React作为招聘求职提到最多的框架，让我不禁想一探究竟。正好以React为例，深入了解下框架的概念。

因为是在学习过程中的笔记，所以内容稍微杂乱一些。

之前讲Node.js的文章中也提到了包的概念。React就是一个包，需要依赖Node.js平台来安装。一般是进行全局安装，这样在我们自定义的文件路径下，运行React命令就可以新建一个React项目模板。其实就是一个文件夹，文件夹里面包含一个包所需要的各个组件，Package.jason、Node_module、src等。通过运行这个项目，就可以打开一个项目模板中做好的网页了。如果要发布这个网页，那么通过购买域名、租云服务器，将域名和服务器绑定后，把React项目文件夹上传到云服务器即可。

框架的作用不止是帮我们生成一个项目的文件夹等，还帮我们默认实现了一些功能，省去了我们编程的时候一些麻烦。一些通用性的操作代码直接整合在框架内，我们只需要用简单的几行代码，就可以让框架识别，并转化为浏览器能够识别的JS代码。对于React框架，称之为JSX语法。

React框架可以通过JSX语法，将html、css以及js集中到一个文件中，非常的强大。在Public文件夹中的index.html是网页文件，与之对应的需要在src文件夹中有一个index.js文件，用来定义与网页元素对应的代码内容。具体需要实现什么样的网页样式或者功能，就需要我们自己去编辑这个index.js文件了。

总体来说，JavaScript就相当于linux系统，我们在上面也可以实现各种功能，框架就类似Windows系统，可以让使用计算机的门槛更低，功能实现更方便。

React框架通过组件的形式构件网页。将网页的每一块元素（一个滚动条、一个列表等）的html、css和js都合并为一个组件，放在src文件夹内。组件需要继承React.component类。通过index.js引用组件，并赋给对应的elementID即可。这样结构清晰，易于维护。导入的组件需要首字母大写。

还有一种是函数式组件，相比类组件，代码要简单一些。但是函数式组件没有状态组件，不能实现计数等功能，需要结合hook来使用。目前用函数式组件的比较多。

组件之内可以嵌套组件，用来实现不同的内容。对于组件的样式，可以在组件js文件内直接定义，也可以通过引入外部css文件来定义（在js元素中className=’’来调用）。React官方推荐是在组件js文件内写好，这样一个组件就是一个整体，包含了css的内容，复用更方便。

对于组件中的函数，可以在render中直接写，也可以在class外部定义函数，然后在class内调用，这个时候，如果函数名后面不加括号，就是被动执行，被调用的时候才执行。如果加了括号，就会主动执行了。

对于this的研用法，需要分辨是哪个部分调用，那么this就指向哪一部分。如果想要指定this，那么需要调用bind。bind、apply和call可以指定this，通过在一个函数后面加.call（）或者.apply（）可以指定this，并且自动执行函数。bind的区别在于不会自动执行函数，需要手动加括号执行函数。如果一个函数是通过箭头（）=>定义的话，那么函数中的this就会指向外部的this，就不存在this未定义的情况。否则，函数内的this就只能指向函数，需要结合bind来修正this的指向。

ref可以将input box里的值传递给元素，建议通过新建ref并赋值给变量，这样可以防止ref的名称冲突。

React的状态变量，每一次改变后React都会自动更新前端显示。通过修改普通的变量的值，React是无法自动感知的。State需要定义在render外部，在render中通过this.state.text来访问。状态变量的修改需要使用setState方法，不能直接赋值。就算是要增删元素，也需要先把state.list先赋值给一个变量，对变量进行修改后，再通过setState来对状态变量进行修改。

对于React的列表显示，可以通过Map映射的方式将列表的每个元素映射成一个指定的格式，显示在web中。

对于React中的列表，如果需要对列表进行操作（增删、修改），并实时更新，那么需要用到Key值来提高性能。React通过虚拟DOM来减少对DOM的操作，从而节省内存，提高性能。通过给列表的每个元素一个唯一的Key值，在将列表对应到虚拟DOM的时候，就可以逐个Key值进行比较，如果Key值对应的列表元素变化了，那么就生成一个修改补丁，作用到DOM中去就可以了。如果不用Key值，而是挨个去对比列表数据，那么如果从第二行插入一个数值，React就需要对第二行往后的所有元素都进行修改。通过Key值的方法，只需要一步操作就可以了。而至于React怎么生成补丁去修改DOM，这个就不是我们需要关心的事了，React这个框架会帮我们实现这个步骤。

对于条件渲染，可以通过两种方式。一个通过{条件？真，假}的三目运算，二是通过&&操作符，只有当&&前面的条件成立了，才会执行后面的语句。

每个组件中都包含一个render，用来渲染组件对应的web部分的内容。在render中，如果需要调用函数，可以把函数用大括号{}包裹起来。

对于render中要显示的内容，一般通过Map来映射，而如何生成包含要显示的内容的数组，需要在render外部通过函数来实现。

对于一个输入框（input），可以通过onInput={this.handleInput}来实现当在输入框内输入内容的时候触发函数。函数的输入参数可以为event，event.target.value即为我们在输入框内输入的参数。

以上的内容，可以从无到有创建一个网页，在网页中显示列表。并可以对列表进行模糊搜索，显示搜索的结果。

—————————————————————————————————————————

Github:

https://github.com/CAOYUhhu

Twitter:

https://twitter.com/james_tsao21