我开始学习更好的redux+reactjs
例如,我有一个新闻或列表缩减程序,它应该返回一个包含新闻项的数组:
const list = [
{id: 1, title: 'One'},
{id: 2, title: 'Two'},
{id: 3, title: 'Three'}
]
export function newsReducer(state = [], action) {
switch (action.type) {
case 'GET_NEWS':
return list
default:
return state
}
}Run Code Online (Sandbox Code Playgroud)
这段代码工作正常,但在其他文章中我看到它们以 [...state, ...] 和不可变格式传递参数...
那么我可以简单地传递参数还是应该以不可变的格式传递?
谢谢
I want to return fetch API result from a function. but I get undefined and that function doesn't return me fetched data :
function func() {
fetch('https://randomuser.me/api/?results=10')
.then(response => response.json())
.then(json => (json.results))
}
let users = func()
console.log(users);Run Code Online (Sandbox Code Playgroud)
我正在尝试实现一个有 10-15 页的应用程序。这适用于 react-router 很好,但我应该使用 react-loadable 来获得 Spinner 和加载效果......
但是如何在 loadable 中导入路由器组件?
我应该为每个组件创建一个 const 变量吗?
像这样 :
const Home = Loadable({
loader: () => import('./Home'),
loading: Loading,
});
const News = Loadable({
loader: () => import('./News'),
loading: Loading,
});
const Gallery = Loadable({
loader: () => import('./Gallery'),
loading: Loading,
});
class App extends React.Component {
render() {
return (
<Router>
<Route exact path="/" component={Home} />
<Route path="/news" component={News} />
<Route path="/gallery" component={Gallery} />
</Router>
)
}
}Run Code Online (Sandbox Code Playgroud)
还是可以用其他技巧?
我有一个工作面试,招聘人员问我“处理部分更新和管理应用程序大小”
例如,他解释并展示了一个大小为 8MB 的 SPA,他说这并不理想和完美!?!?
他说我们应该用不同的方法管理应用程序的大小!?
为了测试,在面试结束后,我使用 google chrome DevTools 检查了linkedin 网站。在任何请求之后,我看到响应谁是 html 网页(Html、Css、JS)并且显然在每个请求之后将 html 响应附加到页面谁是控制 SPA 大小的想法!
所以我有一个问题,默认情况下,在 create-react-app 包中,我们有 webpack 来创建 web 模块,并将所有组件加载到一个 bundle.js 中,这个 js 文件对于 40 个或更多组件来说会很重。也许 10MB 或更多...
如何使用完美准确的部分更新方法实现真实且优化的 SPA 结构?
不幸的是我只懂一点英语,如果我写错了,请原谅我:-) ;-)
谢谢
我开始更好地学习 TDD 并且我正在学习很多文章......
例如在一篇文章中我看到了这个测试代码:
import React from 'react';
import {shallow} from 'enzyme';
import ProductList from './ProductList';
it('should render a list of products as an unordered list', () => {
const mockProducts = [
{id: 1, name: 'Mock Product 1', brand: 'MockBrandA'},
{id: 2, name: 'Mock Product 2', brand: 'MockBrandB'},
{id: 3, name: 'Mock Product 3', brand: 'MockBrandC'},
];
const wrapper = shallow(<ProductList products={mockProducts}/>);
expect(wrapper.find('li').length).toEqual(mockProducts.length);
// 3
});Run Code Online (Sandbox Code Playgroud)
这是一个测试 ul/li 列表组件的简单代码,它将返回 3 ,因为我们在 mockProducts 数组中有 3 个项目。
所以我真的很困惑!!!
真的为什么我们要检查这段代码?!
每次编辑后程序员都会在浏览器中检查结果,那么我们为什么要编写这个测试并且它是必不可少的?!
例如,如果我写了这段代码,当我保存代码时,我会在浏览器中检查结果,我会查看结果,我知道这没问题,这没有错误,那么为什么我还要为简单的组件编写测试代码? …
javascript ×4
reactjs ×4
api ×1
chai ×1
fetch ×1
jestjs ×1
mocha.js ×1
performance ×1
react-redux ×1
redux ×1
unit-testing ×1