![](https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
js框架
文章平均质量分 54
该专栏收录js框架知识如:vue,react,typescript,next.js等
姜慧慧
这个作者很懒,什么都没留下…
展开
-
《尤雨溪教你写vue》课程笔记
1. 响应性工作原理:使用ES5的Object.definePropery,重写啦所有属性的getter和setter方法实际上就是依赖跟踪的基本形式简易getter和setterconst obj = { foo: 123}convert(obj)function convert(obj) { Object.keys(obj).forEach(key =>{ let internalValue = obj[key] Object.defineProperty(obj,ke原创 2022-03-04 11:27:10 · 1162 阅读 · 1 评论 -
vue3初体验
一、vite初始化项目# 创建vite项目,选择vue -> 选择vue-ts npm init @vitejs/app myProject# 进入项目 cd myProject# 安装依赖 npm install# 启动项目 npm run dev二、Composition API(常用部分)2.1setup和refsetup是组合api中第一个要使用的函数setup是组合api的入口函数ref对象是一个函数,作用是定义一个响应式数据,返回一个ref对象,对象中有一个v原创 2021-12-27 17:58:05 · 435 阅读 · 0 评论 -
react-同构介绍
react同构react服务端渲染ssr服务端生成html结构,node在服务端解析首屏模板,react支持ssrreact同构api后RenderToString和RenderToStaticMarkupreact16新出的RenderToNodeStream,性能更好react16里,客户端hydrate取代render项目SSR具体步骤ssr实战,build代码后的事情后node使用babel-node配置node里的react环境修改客户端代码,抽离App组件,前原创 2021-12-17 11:05:42 · 195 阅读 · 0 评论 -
vue-项目初始配置
根据脚手架创建一个项目引入axios发送请求(axios封装)配置拦截器(请求拦截器封装、相应拦截器封装、错误统一处理 注意http的error问题)api统一封装正则表达式封装store模块化封装用户登陆的token信息放入store中js-cookie轻量级api统一设置管理cookie如果需要前端解决跨域,就在前端解决跨域引入组件库公共界面布局分环境打包(测试)项目优化...原创 2021-07-03 14:53:00 · 68 阅读 · 0 评论 -
react-性能优化
1. react组件性能优化属性传递优化尽量不再render里面写函数用bind(this)尽量不要再render,里面写对象,render会执行多次,会创建多个对象,没有销毁传递组件数据,尽量少的传递数据,不要把所有数据都传递多组件优化父组件修改,子组件也会重新渲染,这样性能不好。定制shouldComponentUpdate或者继承React.PureComponent//递归比较,复杂度太高,不可接受// react建议,只做浅层对比let obj = {name:原创 2021-12-02 16:22:29 · 707 阅读 · 1 评论 -
react-核心原理介绍
虚拟dom在react里面生成dom树,更改数据时把原dom和新生成dom元素比较,找出更新的dom点,更新生命周期定制shouldComponentUpdate(nextProps,nextState){if(nextState.num%5 == 0){return true} return false}setState在render里面不要用setState(),会死循环...原创 2021-11-30 18:39:21 · 158 阅读 · 0 评论 -
react-redux和redux原理
简单redux实现export function createStore(reducer,enhancer){//中间件 if(enhancer){ return enhancer(createStore)(reducer) } let currentState = {} let currentListeners = [] function getState(){ return currentState } function subscribe(Listener){ curre原创 2021-11-29 17:20:53 · 283 阅读 · 0 评论 -
react-redux基础
Redux状态管理,单一状态,单向数据流核心概念: store,state,action,reducerstore保存所有状态,那里都有记录state需要改变得时候,需要告诉专员dispatch要干什么action处理变化得人reducer拿到state和action,生成新的state首先通过reducer新建store,随时通过store.getState获取状态需要状态变更,store.dispatch(action) 来修改状态reducer函数接收state和action,返回新的.原创 2021-11-29 14:44:22 · 192 阅读 · 0 评论 -
react-原理解析
setState()说明setState()是异步更新调用注意:使用该语法时,后面的setState()不要依赖于前面的setState()可以多次调用setState(),只会触发一次重新渲染解决在一次setState()上修改值的情况 this.setState((state,props) => { return { //state最新的值 count: state.count + 1 .原创 2021-10-21 17:21:42 · 198 阅读 · 0 评论 -
React-路由
React路由一、路由介绍前端路由是url路径与组件的对应关系二、使用步骤1.基本使用npm add react-router-dom2.导入三个核心组件: Router/Route/Link// HashRouter\BrowserRouter两种模式,推荐BrowserRouter import {BrowserRouter as Router,Route,Link} from 'react-router-dom'3.使用Router组件包裹整个应用4.Link组件作原创 2021-10-21 10:54:58 · 142 阅读 · 0 评论 -
react-进阶知识
一、组件通信父组件传递数据给儿组件 props接收传递给组件的数据传递数据: 给组件标签添加属性接收数据: 函数组件通过参数props接收数据,类组件通过this.props接收数据<Hell0 name="jack" age={19}/>//函数组件function Hello(props) { console.log(props) return ( <div>接收到数据:{props.name}</div> )}//类组件原创 2021-10-21 09:19:30 · 117 阅读 · 0 评论 -
react-基础知识
------------------------------------------------基础-----------------------------------------------一、 react 使用npm i react react-dom引入 react 和 react-dom 的 js<script src="https://unpkg.com/react@16/umd/react.development.js"></script><原创 2021-10-20 16:18:57 · 298 阅读 · 0 评论