react以及hoos组件

最新推荐文章于 2024-05-13 23:42:06 发布

左手js右手vue

最新推荐文章于 2024-05-13 23:42:06 发布

阅读量255

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/ck2018182068/article/details/128246012

版权

React

React 是一个用于构建用户页面的JavaScript库，专注于视图，实现组件化开发。

特点

组件化思维
单向数据流
虚拟dom

组件化概念

将一个复杂的页面分成若干个独立的组件，每个组件都包含自己的逻辑和样式，在将这些组件组合成一个完整的页面。这样的操作即减少了逻辑复杂度又实现了代码的重用。

竞品

vue、angular

创建

全局安装脚手架：npm i -g create-react-app
创建项目：create-react-app myreact
切换目录：cd myreact
运行项目：npm start
文件名介绍（目录结构）
在这里插入图片描述

jsx语法

JavaScript + xml 都结合体，可以理解为 html + js
jsx-transform 可以把jsx语法转为js语法

特点

有且只有一个根节点

（/* */注释内容）

类名使用className
数组可以有html标签
style对象会自动展开

组件

函数组件：负责战术，也称为视图组件
props父组件传递的参数没有this
类组件：处理数据，也称为容器组件
state数据
生命周期器
props父组件传递的参数
有this

tips：推荐使用函数组件
数据和处理数据通常放在容器组件里面

事件与响应函数

onClick={()=>{响应内容}}
onClick={this.say}

函数的参数

匿名函数：onClick={()=>this.say(参数)}
bind：onClick={this.Hi.bind(this,参数)}
state数据：this.setState({ })更新数据

表单

受控表单
state与表单绑定

<input value={this.state.msg} onChange={e => this.setState({ msg: e.target.value })} />

非受控表单
通过ref
导入：import { createRef } from 'react';
创建一个引用：this.inpRef = createRef();

<input type="text" ref={this.inpRef} />

<button onClick={() => alert(this.inpRef.current.value)}>获取值</button>

组件的传参

容器组件App
state.color
state.size
state.msg(文本)
setColor
setSize

Size控制大小
Color控制颜色
父传子：props传参
在这里插入图片描述
子传父：props回调函数方式

React的生命周期

react组件在从1创建到销毁会经理一系列过程，在这些过程执行回调函数，称为生命周期钩子函数

挂载

constructor构造函数 static getDerivedStateFromProps (nextProps,prestate)
props更新触发state更新（要求返回一个新的state) nextProps最新的props，preState更新前的state
render渲染 componentDidMount组件已经更新（props，state，dom，ref都己经完成更新)
作用：注册监听事件，定期器，dom操作，ajax请求

更新

static getDerivedStateFromProps ( nextProps,preState）
props更新触发state更新（要求返回一个新的state) nextProps最新的props，preState更新前的state
shouldComponentUpdate
组件是否需要更新
返回true更新，返回false亭子更新
常用于组件的优化
render渲染 getSnapShotsBeforeupdate更新前获取快照返回的值是cdu的第三个参数
componentDidUpdate(prevProps,
prevState,snapshot)组件已经更新snapshot是gssb传递的参数