结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
case ‘edit_name’:
return {
…state,
name:action.name
};
}
return state;
}
export default ding;
- 和视图产生关联
//src–>index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./app’;
import {Provider} from ‘react-redux’
import store from ‘./store’;
ReactDOM.render(
,
document.getElementById(‘root’)
);
- 使用connect
import React,{Fragment} from ‘react’;
import { connect } from ‘react-redux’;
function Inner(props){
let {name,age,dispatch} = props
return (
name:{name}
age:{age}
<button onClick={()=>{
dispatch({
type:“edit_name”,
name:“超级QQ”
})
}}>超级进化
)
}
export default connect((state,props)=>{
return state.data;
})(Inner)
浏览器反馈
=============================================================================
// src->inner.js
import React,{Fragment} from ‘react’;
import { connect } from ‘react-redux’;
function Inner(props){
console.log(props);
let {name,age,dispatch} = props
return (
name:{name}
age:{age}
<button onClick={()=>{
dispatch({
type:“edit_name”,
name:“超级QQ”
})
}}>超级进化
)
}
export default Inner
将刚才使用connect
的代码改为正常的导出
然后我们需要知道hooks的三个属性
-
useSelector(回调函数):通过回调函数的返回值,来获取state
-
useStore():直接获取整个仓库
-
useDispatch:获取仓库中的dispatch()方法
我们在这里实现刚才的功能是就变得简单了许多
import React, { Fragment } from ‘react’;
import { useSelector, useStore, useDispatch } from ‘react-redux’
function Inner() {
let {name,age} = useSelector((state)=>{
return state.data
});
let dispatch = useDispatch();
return (
name: {name}
age: {age}
<button onClick={()=>{
最后
编程基础的初级开发者,计算机科学专业的学生,以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念,以优化代码,提高编程技能。这份笔记都是可以作为参考的。