React开发学习笔记

最新推荐文章于 2023-08-09 11:17:46 发布

qq_32057283

最新推荐文章于 2023-08-09 11:17:46 发布

阅读量120

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/qq_32057283/article/details/107707508

版权

第一章 React的思路

一、安装环境

1、下载create-react-app
npm install --global create-react-app

可以在c:\windows\users\xxxx\AppData\Roaming\npm 目录下

二、创建应用

1、使用如下命令，可以在当前目录下创建first_react_app应用
create-react-app first_react_app

如果出现如下问题，则可能是设置了不恰当的代理或认证不通过：

npm ERR! network request to https://registry.npmjs.org/cra-template failed, reas
on: connect ETIMEDOUT 104.16.21.35:443
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settin
gs.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\wangqin\AppData\Roaming\npm-cache\_logs\2020-07-28T13_26_2
6_866Z-debug.log

可以尝试取消认证
npm config set strict-ssl false

然后重新执行创建应用目录，将在当前目录下创建first_react_app应用目录。目录下包含如下目录：
src/
public/
README.md
package.json
node modules/
其中src目录主要存储源代码，应用的入口文件为src/index.js
使用npm start可以启动一个服务器，显示示例页面

三、react的技术要点

1、基于组件的开发
import React, {Component} from ‘react’ 导入react基础组件，Component是所有组件的基类，提供了很多组件共有的功能
class xxx extends Component { } 定义组件
import xxx from ‘…’ 导入组件，ES6语法
2、JSX
JSX是javascript的语法扩展，允许在javascript编写像HTML一样的代码
JSX中的元素不局限于HTML中的元素，还可以是任何一个React组件
React判断一个元素是HTML元素还是React组件，看第一个字母是否是大写
在JSX中可以通过onClick这样的方式给一个元素添加事件处理函数，在HTML中也可以用onclick添加事件处理函数，两者的差别在于：
onclick的事件函数是全局环境执行，会带来不可知的结果、存在性能问题，使用onclick的DOM元素动态删除时，需要注销对应的时间处理器，否则会产生内存泄露，BUG很难发现
onClick挂载的函数，都会控制在组件范围内，不会产生全局影响。使用事件委托的处理方式，挂在DOM树的最顶层，所有的点击事件都会被这个统一的DOM函数捕获处理，然后根据具体组件分配给特定的函数
3、组件生命周期
React控制组件的生命周期，在unmount时，清除所有的事件处理函数
4、组件封装
JSX可以把JavaScript, HTML和CSS的功能组合在一个文件中，实现真正的组件封装
5、响应式编程
UI=render(data)
数据改变了，界面就会做出响应
6、Virtual DOM

7、React程序控制流程
（1）主程序(index.js)

（2）组件(XXX.js)

第二章设计React组件

一、高质量React组件的原则和方法

划分组件边界
规划组件的数据各类
遵循组件的生命周期

二、React组件的数据

组件数据各类包括如下两种，哪一种数据的改变都会引起组件的重新渲染：
prop: 组件的外部接口，是外部传递给组件的数据，一个React组件通过定义自己能够接受的prop就定义了外部接口
state: 组件的内部状态
state修改必须使用setState，如果直接修改state的值，不会引发页面渲染，会导致无法预料的结果

sublime增加支持react的插件：
使用ctrl+shift+p打开package control: install package
搜索babel，安装，然后重启sublime view->syntax->babel，选择javascript(babel)

三、组件的生命周期

装载过程(mount)：组件第一次在DOM中渲染
更新过程(update)：组件重新渲染时
卸载过程(unmount)：组件从DOM中删除时
三种过程，React库会依次调用组件的一些成员函数，称为生命周期函数。定制一个React组件，也就是定制这些生命周期函数
1、装载过程调用函数

constructor：构造函数
getInitialState
getDefaultProps
componentWillMount
render
componentDidMount

（1）、 constructor
构造函数，通常用于：
初始化state
绑定成员函数的this环境（类的成员函数在执行时不和具体实例自动绑定，需要在构造函数中绑定的当前实例）
可以使用：：(bind操作符）绑定，替代bind，不推荐
this.foo = ::this.foo
与如下相同：
this.foo = this.foo.bind(this)

（2）、getInitialState、getDefaultProps
在组件被装载时调用，getInitialState这个函数的返回值会被用来初始化this.state，只能在装载过程中被调用一次，用于React.createClass()方法创建组件类时，目前已经不用
（3）、render
React最重要的函数，没有默认实现
React返回一个JSX描述的结构，最终由React实现渲染
如果组件不做渲染，可以返回null或false，告诉React不需要渲染
在Render中不要对this.state数据做修改，要是一个纯净的函数，完全根据this.state, this.props来决定返回的结果，不要引起状态变化
（4）、componentWillMount，componentDidMount
在装载过程中，componentWillMount函数会在render前被调用，componentDidMount会在render后被调用
一般不使用componentWillMount，相应的处理可以写在constractor函数中
componentDidMount不是在组件的render后立刻被调用，而是在所有组件都被React渲染后才作为装载的结果被React按组件一一处理
componentWillMount可以被服务器端和浏览器端被调用，componentDidMount只能被浏览器端调用，这可以用在只在浏览器端处理的功能上，比如AJAX。此外，在这个阶段DOM已经完全生成，可以对DOM进行任何操作，如与其他UI或jQuery等集成
2、更新过程