安装react-redux: yarn add react-redux
其实react-redux分为两个部分,一是provider,而是connect。
通过provider,组件可以连接store。
通过connect,store里的数据可以连接到组件上,算是复用组件的意思。也就是说是一种store数据
映射到组件的方式。映射的意思其实可以跟复制这个意思相反,一旦映射成功,改变store就等于改变组件的state,不用再像之前赋值一样还需要设置订阅模式了。
Provider—>store/index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import { Provider } from 'react-redux';
import store from './store';
const App = (
<Provider store={store}>
<TodoList />
</Provider>
);
ReactDOM.render(App, document.getElementById('root'));
关于connect:export default connect(mapStateToProps, mapDispatchToProps)(TodoList)
;
原先是export default TodoList,现在不一样。connect的连接:mapStateToProps负责把store.state映射到组件的props上,mapDispatchToProps默认传入参数dispatch,可以进行dispatch(action)操作。
具体代码如下:
import React, { Component } from 'react';
import { connect } from 'react-redux';
const TodoList = (props) => {
const { inputValue, list, changeInputValue, handleClick } = props;
return (
<div>
<div>
<input value={inputValue} onChange={changeInputValue}/>
<button onClick={handleClick}>提交</button>
</div>
<ul>
{
list.map((item, index) => {
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
}
const mapStateToProps = (state) => {
return {
inputValue: state.inputValue,
list: state.list
}
}
// store.dispatch, props
const mapDispatchToProps = (dispatch) => {
return {
changeInputValue(e) {
const action = {
type: 'change_input_value',
value: e.target.value
};
dispatch(action);
},
handleClick() {
const action = {
type: 'add_item'
};
dispatch(action);
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
mapStateToProps默认接受state参数,返回对象。(对象就是store里的数据映射到组件的数据)
mapDispatchToProps默认接受dispatch参数。
2022/4/13
终于知道vue双向数据绑定和单向数据流的关系了,为什么修改数据的时候不会通知视图层更新。
因为双向绑定是v-model,实际上就是react中的赋值+onChange事件,它的双向绑定的范围就只是如此。(表单数据双向绑定)
所以是混淆了双向绑定和单向数据流了。
看视频学习时先看别人的笔记是一个很好的选择哟!
以下是别人讲计算属性,我觉得说的很好,主要是依赖+缓存机制。(依赖数据不改变,页面刷新也不会重新计算,可以提高性能。)
计算属性例子
var computed = new Vue({
el: '#computed',
data: {
firstName: 'f',
lastName: 'a',
age: 40,
},
//计算属性,對應html {{fullName}}
computed: {
fullName: function () {
console.log('computed');
return this.firstName + " " + this.lastName;
}
},
//也可以通过调用方法达到相同效果,对应html{{fullName}}
methods: {
fullName: function () {
console.log('methods');
return this.firstName + " " + this.lastName;
},
}
})
我们可以将同样的函数定义为一个方法,而不是一个计算属性。从最终结果来说,这两种实现方式确实是完全相同的。然而,不同的是计算属性将基于它们的响应依赖关系缓存。计算属性只会在相关响应式依赖发生改变时重新求值(依赖不变就不重计算)。这就意味着只要 age还没有发生改变,多次访问 fullName时计算属性会立即返回之前的age计算结果,而不必再次执行函数。但fullName()每次刷新时都会重新执行。(计算属性只要依赖属性没有改变,即使刷新的时候也不会重新执行)
优先推荐computed,简洁效率高。
学习了store和组件传值,才知道数据分工,数据统一管理的重要性。
在vuex的mutation中,方法接受两个参数,一是state,二是payload。
Vue 中路由跳转方式(声明式/编程式) Vue 中路由跳转有两种,分别是声明式和编程式 用 js 方式进行跳转的叫编程式导航 this.$router.push() 用 router-link 进行跳转的叫声明式 router-view 路由出口,路由模板 显示的位置
链接:https://blog.csdn.net/jiandan1127/article/details/86170336
都是对象。
query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
hash和history路由:https://www.jianshu.com/p/3fcae6a4968f?open_source=weibo_search
浅拷贝和深拷贝:浅拷贝的话是复制了指向地址,当修改b的属性值时,a也会发生改变。而深拷贝是生成
一个新的内存地址用来存放复制的对象。
因为js的栈堆机制才有上面这个例子(也就是说当了解栈堆:就能了解深浅拷贝了,也能了解为什么单纯的对象赋值是浅拷贝)
(深拷贝:基本类型拷贝栈是深拷贝,引用类型拷贝堆是深拷贝,引用类型拷贝栈是浅拷贝)
(单纯的对象赋值是浅拷贝,因为对象赋值是进行了栈拷贝,也就是引用地址拷贝,那么就是浅拷贝)
引用数据类型的复制
let m = { a: 10, b: 20 };
let n = m;
n.a = 15;
console.log(m.a) //此时m.a的值是多少,是10?还是15?
答案是:15
就是说,基本数据类型是存在栈里,引用数据类型在堆里。赋值是栈复制,所以对基本类型来讲,
确实是实现了复制,但是对于引用类型来讲,是复制了引用地址。算是浅拷贝。
js栈堆:https://zhuanlan.zhihu.com/p/79840222
关于箭头函数和普通函数的区别:简单来说就是普通函数有的它大多没有,且不能用bind,call绑定。
面试的时候,看到面试官提的问题不妨把面试官当成小白,按自己理解的讲给他听,就像在教他一样。
最近学会了一个技巧,就是学习哪个视频的时候边看别人的课堂笔记,这样可以加深对概念,新知识的理解。