2022/4/12-2022/4/13

安装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绑定。

面试的时候，看到面试官提的问题不妨把面试官当成小白，按自己理解的讲给他听，就像在教他一样。
最近学会了一个技巧，就是学习哪个视频的时候边看别人的课堂笔记，这样可以加深对概念，新知识的理解。