React
文章平均质量分 66
关于react库的一些问题
Xiaaoke
这个作者很懒,什么都没留下…
展开
-
react封装hls视频播放组件
基于hls.js封装的,需要安装依赖。原创 2023-09-19 10:49:23 · 606 阅读 · 0 评论 -
React Hooks 常用API
文章目录useStateuseEffectuseReduceruseCallbackuseMemouseRefuseLayoutEffectuseContextuseState// 返回一个 state,以及更新 state 的函数。 initialState 为初始值// initialState 参数只会在组件的初始渲染中起作用,后续渲染时会被忽略const [state, setState] = useState(initialState);// 更新state值的两种方法setStat原创 2022-05-14 10:00:00 · 899 阅读 · 0 评论 -
react焕发第二春,函数式编程HOOKS
文章目录HOOKSHook 使用规则useState():状态钩子useEffect():副作用钩子副效应是什么?useEffect() 的用法useEffect() 的用途useContext():共享状态钩子useReducer():action 钩子创建自己的 HooksHook APIHOOKSHook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性Hook 是一些可以让你在函数组件里“钩入” React state原创 2022-05-08 00:00:00 · 635 阅读 · 0 评论 -
react脚手架配置代理总结
方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明:优点:配置简单,前端请求资源时可以不加任何前缀。缺点:不能配置多个代理。工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)方法二第一步:创建代理配置文件在src下创建配置文件:src/setupProxy.js编写setupProxy.js配置具体代理规则:const proxy = requir原创 2022-05-08 00:00:00 · 94 阅读 · 0 评论 -
React 中使用 axios
文章目录前置说明常用的ajax请求库特性基本使用axios API常见的请求方式自定义配置新建一个 axios 实例请求配置响应结构拦截器前置说明React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax库(或自己封装)常用的ajax请求库jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻量级, 建议使用:封装XmlHttpRequest对象的ajaxpromise风原创 2022-05-08 00:00:00 · 3654 阅读 · 0 评论 -
React 哲学
React 哲学第一步:将设计好的 UI 划分为组件层级一个组件原则上只能负责一个功能。如果它需要负责更多的功能,这时候就应该考虑将它拆分成更小的组件第二步:用 React 创建一个静态版本最容易的方式,是先用已有的数据模型渲染一个不包含交互功能的 UI。最好将渲染 UI 和添加交互这两个过程分开在构建应用的静态版本时,我们需要创建一些会重用其他组件的组件,然后通过 props 传入所需的数据。即使你已经熟悉了 state 的概念,也完全不应该使用 state 构建静态版本当你的应用比较简单时,原创 2022-05-08 00:00:00 · 128 阅读 · 0 评论 -
react路由传参和跳转
文章目录向路由组件传递参数数据向路由组件传递params参数向路由组件传递search参数向路由组件传递state参数多种路由跳转方式普通组件中使用路由跳转BrowserRouter与HashRouter的区别向路由组件传递参数数据向路由组件传递params参数{/* 向路由组件传递params参数 */}<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>{原创 2022-05-08 00:00:00 · 1105 阅读 · 0 评论 -
react路由
文章目录路由的理解react-router-dom的理解内置组件其它基本路由使用路由的理解什么是路由?一个路由就是一个映射关系(key:value)key为路径, value可能是function或component路由分类后端路由:理解: value是function, 用来处理客户端提交的请求。注册路由: router.get(path, function(req, res))工作过程:当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返原创 2022-05-08 00:00:00 · 206 阅读 · 0 评论 -
react组件的生命周期
组件的生命周期组件的生命周期分成三个状态:Mounting:已插入真实 DOMUpdating:正在被重新渲染Unmounting:已移出真实 DOMReact 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。componentWillMount():挂载前componentDidMount():挂载后componentWillUpdate(object nextProps, object nextSta原创 2022-05-07 00:00:00 · 160 阅读 · 0 评论 -
react组件和组件通信
组件函数式组件(推荐)//1.创建函数式组件function re(){ console.log(this); //此处的this是undefined,因为babel编译后开启了严格模式 return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>}//2.渲染组件到页面ReactDOM.render(<MyComponent/>,document.getElementById('test'))执行了ReactDOM.rend原创 2022-05-07 00:00:00 · 552 阅读 · 0 评论 -
三大核心属性 --- ref与事件处理
文章目录ref基本使用函数式组件中使用ref理解编码获取真实的DOM节点事件处理向事件处理程序传递参数refref:给表单元素进行标记,为了更好获取元素,类似于js中的document.getElementsByTagName这类的获取元素基本使用//创建组件class Demo extends React.Component{ //展示左侧输入框的数据 showData = ()=>{ const {input1} = this alert(input1.val原创 2022-05-07 00:00:00 · 800 阅读 · 0 评论 -
三大核心属性 --- 数据传输props
文章目录基本使用props简写模式函数组件使用理解作用编码操作基本使用//创建组件class Person extends React.Component{ render(){ const {name,age,sex} = this.props //props是只读的 //this.props.name = 'jack' //此行代码会报错,因为props是只读的 return ( <ul> <li>姓名:{name}&原创 2022-05-07 00:00:00 · 237 阅读 · 0 评论 -
三大核心属性---初始化数据state
初始化数据state组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UIvar LikeButton = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: function(event) { this.setState({liked: !this.state.liked原创 2022-05-07 00:00:00 · 215 阅读 · 0 评论 -
react页面渲染
文章目录条件渲染列表表单条件渲染// ifif(unreadMessages.length > 0){ h2 = ( <h2> You have {unreadMessages.length} unread messages. </h2> );}// &&{ unreadMessages.length > 0 && (<h2> You have {unreadMessages原创 2022-05-07 00:00:00 · 610 阅读 · 0 评论 -
jsx基本语法
jsx全称: JavaScript XMLreact定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖作用: 用来简化创建虚拟DOM写法:var ele = <h1>Hello JSX!</h1>注意1:它不是字符串, 也不是HTML/XML标签注意2:它最终产生的就是一个JS对象标签名任意: HTML标签或其它标签标签属性任意: HTML标原创 2022-05-07 00:00:00 · 4626 阅读 · 0 评论 -
react脚手架
react脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置(语法检查、jsx编译、devServer…)下载好了所有相关的依赖可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库: create-react-app项目的整体技术架构为: react + webpack + es6 + eslint + ts(可选)使用脚手架开发的项目的特点: 模块化, 组件化, 工程化创建并启动一个项目第一步,全局安装:np原创 2022-05-07 00:00:00 · 3138 阅读 · 0 评论