react 小白之路

最新推荐文章于 2026-06-16 08:52:42 发布

原创最新推荐文章于 2026-06-16 08:52:42 发布 · 900 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react #javascript #js

React:用于构建用户页面的JavaScript库（2003年5月） Facebook出品

相比vue vue官方维护 React社区维护
React的组成：jsx,component,路由，状态管理工具（redux等），第三方工具
React的特点：1、声明式 2、组件化：复用 3、一次学习，随处编写
开发环境：
1、引用文件方式
npm I -y
npm I react -Save
npm I react-dom
npm I babel-standalone
分别找到以下3个文件并拷贝到自己的项目中
1、node_modules/react-dom/umd/react.development.js、
2、node_modules/react-dom/umd/react-dom.development.js
3、node_modiles/babel-standalone/babel.js
在自己的html文件依次引入
React.development.js
React-dom.development.js
Babel.js

JSX

Jsx是JavaScript拓展语法，相当于js+xml,jsx不是必须的但是用jsx可以提高开发效率。可以让我们在js代码中直接使用html标签，再通过编译器（babel）转成标准得JavaScript后由浏览器执行。

Babel

Babel的作用：1、解析jsx 2、es6转为es5

Babel解析规则：
1、分清html标签，组件，js代码
2、遇到html标签（以<开头），就用HTML规则解析
3、遇到代码块（以{开头），就用JavaScript规则解析
4、因为JavaScript和jsx代码并不兼容，凡是使用jsx的script标签都需要加上type=”text/babel”
Jsx的原理：react.createElement(tag,{attrs},[content])
React 的插值表达式 {}
Jsx注意问题：
必须结束标签
对象不能直接渲染
数组以字符串的形式渲染
Class在js是关键字要改为className可指定样式
指定事件 onXxx
行内样式 style写成对象
For改为htmlFor
表单元素 value改为defaultValue
checked 改为defaultChecked
注释：{/内容/}
属性使用驼峰 tabindex->tabIndex ;autofocus->autoFocus
花括号{}内为js表达式，不允许出现var let const等关键字

React中遍历列表

1、指定key值，可以用map方法进行映射
2、遍历例表时，注意标签语义化
3、Return后面要有字符不能换行（如要换行后面加括号把内容括起来）
React遍历对象：
1、把对象的key值变成一个数组
2、Object.keys()拿到所以key值得数组
3、Object.values()拿到所有value值得数组
4、Object.entries()对象中得每个键值对为一个数组 [[a,1][c,2]]
5、对象的浅拷贝，扩展运算符 , Object.assign

var obj = {...obj2}   
var obj = Object.assign({},obj2)

组件分为函数组件（无状态组件、受控组件、UI组件）、类组件

纯展示组件，这种组件只负责根据外部传入的props来展示，书写更简洁，执行效率更高
特点：
1、只根据传入的props属性展示不同的ui效果
2、组件不会被实例化，整体渲染性能得到提升
3、组件不能访问this对象
4、组件无法访问生命周期的方法
5、无状态组件被鼓励再大型项目中尽可能以简单的写法来分割原本庞大的组件，未来react也会这种面向无状态组件再譬如无意义的检查和内存分配领域进行一系列优化，所以只要有可能，尽量使用无状态组件。（因为没有实例化过程）
6、利用函数定义一个组件，函数必须要有返回值
组件规范：
1、组件必须以首字母大写开头 2、只能有唯一的顶级标签
无状态组件：
const 组件名（首字母大写）=（propss）=>{return jsx表达式}
类组件：（状态组件、非受控组件、容器组件）
1、利用class 类创建的组件，继承自React.Component
2、再类组件中可以使用this,声明周期等特性
3、只有在render、constructor、生命周期函数中才有this指向,其他自定义的方法默认没有this
class 组件名 extends React.Component{
render(){
//this 类组件常用的属性：state、props、refs、content
//state 是组件内部的数据 props来自组件外部的数据 refs标识一个组件的节点
// props传给子组件的值不能改
return jsx表达式
}
}
State 状态(里面放的数据主要作用是渲染，多数为了修改而存在)
Constructor(props){
Super(props);//this.props有值调用后才可再组件中使用this
This.state={key:value}
}
更改state的值
不能直接改，直接更改视图不同步，更改state要用setState更改
This.setState({key:新的value},callback)
this.setState({
key:value
},callback)连续执行多次对象会合并
setState是异步操作，拿到最新的值要在回调函数里拿
this.setState((prevState,props)=>{
return {
key:value
}
},callback) 连续执行多次会放到队列中依次执行

ref的第三种使用方式 (a,字符串 b.回调 c、createRef)

1、this.refs.标示节点字符串
2、<node  ref={(表示节点的变量)=>this.自定义属性= 表示节点的变量}
  this.自定义属性 就可以找到节点了
3、this.state={
  变量: createRef()
}
<node ref={this.state.变量} />
引用这个节点
   this.state.变量.current 就可以引用这个节点了

事件处理函数
1、要绑定this 或者用箭头函数，建议尽量在constructor里绑定this,因为这样只执行一次绑定
2、要进行传参数 this.方法名.bind(this,参数)
3、事件处理函数的最后一个参数是事件对象e
拓展：react把事件挂在标签，源生不推荐使用，为何还这么做？
1、在App组件写不会引起内存泄漏问题（路由切换就会卸载，组件卸载事件也卸载）
2、事件监听挂载顶层对象，主要用的是事件委托
3、源生Html中一开着就会有内存泄漏的问题
受控组件和非受控组件
1、表单元素它懂得值来自于state 这个组件就是受控组件，否则就是非受控组件
2、普通组件：它的数据都来自于外部（props）这个组件就是受控组件

脚手架环境

npm I create-react-app -g
create-react-app –version
create-react-app 项目名
cd 项目名
npm run start
引用图片
Import 变量 from “图片路径”
单张 src后不能直接写路径
多张
组件的传值
1、父=》子通过属性传递
2、子=》父调用父组件传递过来的方法来实现。传递的数据放到参数里
Mock数据工具
npm i json-server -g
json-server --version 就可以看到版本号了
建立一个json文件 xxx.json

       {
          "list":[
              {
                  "id":1,
                  "name":"zhangsan",
                  "age":20
              },
              {
                  "id":2,
                  "name":"lisi",
                  "age":25
              }
        ]
}

json-server xxx.json --port 端口
json-server xxx.json --port 端口 -w (修改json数据不用重启)

json-server 模糊查找有两种形式
全局
url?q=查找的关键字
以某一个字段模糊查找
url？字段_like=查找的关键字
代理
1）正向代理开发环境
2）反向代理上线环境

React脚手架自带的服务器：webpack-dev-server

如何配置正向代理
项目目录下/node_modules/react-scripts/config/webpackDevServer.config.js

proxy:{
        "/weather":{
             target:"http://www.weather.com.cn",
             changeOrigin:true,
             "pathRewrite":{
               "^/weather":"/"
             }
        }
    },

设置完代理要重启项目
弹射 eject
yarn eject 不能撤销
如果弹射后出错，重装依赖
注：eject是不可逆的，执行后后续就不能更新了，所以不建议使用，后期可通过第三方插件来实现webpack的配置。Eject是为了把配置、依赖等信息暴露到外面，可以方便进行webpack的各种配置。

React生命周期的钩子函数：

挂载阶段
Constructor(props,content)
1初始化state、2事件处理函数绑定this
Static getDerivedStateFromProps(props,state)
1、父组件的值传给子组件state的属性做为值派生状态
2、静态方法不能用this,调用是用类.静态方法名
3、返回一个对象更新状态或者null表示新的props不需要任何state更新
4、父组件的props更改所带来的重新渲染也触发此方法
5、Fiber：新算法https://segmentfault.com/a/1190000018250127?utm_source=tag-newest
Render()
1、被调用时计算this.props和this.state并返回以下类型：
1、React元素（可以是dom元素也可以是自定义组件）
2、字符串、数字（以文本节点形式渲染到dom）
3、Null、布尔值（不渲染）
4、不能直接返回对象
5、不能返回两个标签，只能有一个
Import {Fragment} from ’react’=>

也可以 <>

<>
Fragment 空标记相当于 <></>

componentDidMount()
1、获得真实的dom节点
2、发送ajax请求
3、组件调配后立即调用，初始化使dom节点应在这进行
4、初始化第三方dom库，也是在这进行初始化
更新阶段
Static getDerivedStateFromProps(props,state)
ShouldComponentUpdate(nextprops,nextstate)
1、返回true 就会render 返回false 不会render
2、可以加条件减少不必要的渲染，增加性能
拓展： 1、PureComponent 进行浅比对，进行性能的优化（纯组件）
2、对无状态组件用 React.memo(组件)
3、我们把参数是组件返回值也是组件这类组件我们叫 “高阶组件”(HOC)
本质是高阶函数（map filter forEach …)
Render()
getSnapshotBeforeUpdata(prevprops,prevState)
1、必须和componentDidUpdata一起用
2、必须返回一个值
3、不能和旧版的钩子函数一起使用
4、目的是为了返回数据更新前的dom状态
ComponentDidUpdata（prevProps,prevState,snapshot）
1、作用:监听数据变化
2、组件里无论哪个变化都会调用此钩子函数
3、监听路由参数变化
4、在此钩子函数慎用setState,会死循环
5、异步获取数据时，更新时返回
卸载阶段
ComponentWillUnMount
1、使定时器无效
2、取消网络请求
3、清理在componentDidMount中创建的任何监听
4、在组件卸载前执行
yarn 和npm 命令对比表格 yarn也是Facebook出品
https://yarn.bootcss.com/docs/migrating-from-npm/
react修改端口号
1、进入项目的目录/node_modules/react-scripts/scripts/start.js
2、改端口 const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 5000;

eslint no-restricted-globals
拓展：在react中confirm不能直接用的问题
// eslint-disable-next-line
下面这句js 就不用eslint进行语法检查了。
react cli eslint 配置
https://www.codercto.com/a/13256.html
父组件传给子组件没值得情况下，子组件设置默认值
1、设置 props默认值
类组件：
Static defaultProps={
key:默认值
}
无状态组件：
组件名.defaultProps={
Key:默认值
}
2限定类型
Import PropTypes from ‘prop-types’
类组件
Static PropTypes={
Key:PropTypes.类型
}
无状态组件
组件名.propTypes={
Key:PropTypes.类型.isRequired（必须填）
}
常用得钩子函数：constructor render componentDidMount componentWillUnmount