在React的这个文档中,据说
shallowCompare对当前props和nextProps对象以及当前state和nextState对象执行浅等式检查.
我无法理解的事情是If It浅层比较对象,那么shouldComponentUpdate方法将始终返回true,如
我们不应该改变国家.
如果我们没有改变状态,那么比较将始终返回false,因此shouldComponent更新将始终返回true.我很困惑它是如何工作的,我们将如何覆盖它以提高性能.
我正在使用react-redux创建应用程序.我正在使用webpack进行捆绑和babel进行转换.当我尝试在我的代码中使用箭头功能.它给我的错误是:
Module build failed: SyntaxError: Unexpected token (34:15)
};
> handleSubmit = (event) => {
^
event.preventDefault();
this.props.dispatch(actions.addTodo(this.state.inputText));
我的webpack配置文件如下所示:
module.exports = {
devtool: 'inline-source-map',
entry: [
'webpack-hot-middleware/client',
'./client/client.js'
],
output: {
path: require('path').resolve('./dist'),
filename: 'bundle.js',
publicPath: '/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'react-hmre']
}
}
]
}
};
我在package.json中使用以下babel包:
"babel-cli": "^6.6.5",
"babel-core": "^6.4.5",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13", …我正在努力做最后一年的反应.我们遵循的约定是componentDidMount在数据到来之后进行API调用,获取数据和setState.这将确保组件已安装,并且设置状态将导致重新呈现组件但我想知道为什么我们不能setState componentWillMount或constructor
官方文件说:
在安装发生之前立即调用componentWillMount().它在render()之前调用,因此在此方法中设置状态不会触发重新呈现.避免在此方法中引入任何副作用或订阅.
它说setting state in this method will not trigger a re-rendering,在进行API调用时我不想要它.如果我能够获取数据并且能够设置状态(假设API调用真的很快)in componentWillMount或in constructor并且数据存在于第一个渲染中,为什么我要重新渲染呢？
如果API调用很慢,那么setState将是异步并且componentWillMount已经返回然后我将能够setState并且应该发生重新渲染.
总的来说,我很困惑为什么我们不应该在构造函数或componentWillMount中进行API调用.在这种情况下,有人能真正帮助我理解反应是如何起作用的吗？
我正在我的React应用程序中集成typescript,它有大量的代码.我有一些应用程序级别的HOC,我将其应用于React组件:
import React from 'react';
import HOC1 from 'app/hocs/hoc1';
import compose from 'recompose/compose;
class MyComponent from React.Component {
...component stuff...
}
export default compose(HOC1())(MyComponent);
但是现在我在我的应用程序中添加了typescript,每当我导入时
import HOC1 from 'app/hocs/hoc1';
它说
TS2307: Cannot find module 'app/hocs/hoc1'.
我不想为所有HOC添加类型定义.什么是解决方案以及为什么我收到此错误？
[编辑]我使用baseUrl的tsconfig为好.我的文件夹结构是
/Project/configs/tsconfig
/Project/src/app/hocs
在tsconfig,我已经给了baseUrl为../src通过该文档.
另一个Edit 和我的webpack配置看起来像:
{
test: /\.(t|j)sx?$/,
loader: 'happypack/loader?id=jsx-without-proptypes',
include: [
path.resolve(__dirname),
path.resolve(__dirname, '../src'),
],
},
整个webpack配置看起来像
const config = {
context: path.resolve(__dirname, '../src'),
mode: NODE_ENV,
optimization: {
splitChunks: false,
nodeEnv: …SyntheticEvent汇集在一起.这意味着将重用SyntheticEvent对象,并且在调用事件回调后,所有属性都将无效.这是出于性能原因.因此,您无法以异步方式访问事件.
参考:React中的事件系统
我有一个正在运行的整数流,如何在任何时间点从该流中获取最大的k个元素.
我是酶测试的新手,我已经制作了一个组件:
import React from 'react';
import {
compose,
withState,
withHandlers,
branch,
pure,
renderComponent,
} from 'recompose';
import Fields from './components/Fields';
import Flow from './components/Flow';
export const MODE = {
preview: 'preview',
edit: 'edit',
};
const inEditMode = ({ mode }) => mode === MODE.edit;
const Component = branch(
inEditMode,
renderComponent(Fields),
renderComponent(Flow),
)(Flow);
const Tab = pure(props => <Component {...props} />);
export default compose(
withState('mode', 'changeMode', props => {
const path = props.path;
return props.path ? MODE.preview : MODE.edit;
}),
withHandlers({ …我在我的应用程序中使用 React。我正在调用 API，componentDidMount但它是有条件的。我在组件中的代码是
componentDidMount() {
if (!this.props.fetch) {
fetchAPICall()
.then(() => {
/** Do something **/
});
}
}
我已经写了测试：
it('should not fetch ', () => {
const TFCRender = mount(<Component fetch />);
const didMountSpy = jest.spyOn(TFCRender.prototype, 'componentDidMount');
expect(didMountSpy).toHaveBeenCalledTimes(1);
expect(fetchAPICall).toHaveBeenCalledTimes(0);
});
测试抛出了我的错误
TypeError: Cannot read property 'componentDidMount' of undefined
我做错了什么，测试这种情况的正确方法是什么。
我正在使用jest编写测试用例。我的一个函数使用uuid，因此它不是纯函数。代码是这样的：
const myFunc = () => {
const a = uuid();
return a;
}
我正在编写我的测试用例：
test('should return a unique id value', () => {
const a = uuid();
expect(myFunc()).toEqual(a);
});
显然它不会工作，因为它每次都会生成一个唯一的 ID。如何为此类功能编写测试用例。
[编辑]
我不想测试这个uuid函数，因为它总是会生成一个新的 id，而且它是一个已经在测试中的库函数。我想测试另一个使用uuid、生成新对象并返回该对象的函数。这个函数被其他一些函数使用等等，这使我无法测试任何一个，因为初始对象的 id 与我在测试时使用的 id 不同。
我有一个组件，例如X由我app和DOM主体呈现的一个组件。我有另一个Y由该组件呈现的组件，X但该组件Y应在全屏模式下打开。因此，即使渲染它，我也需要在document.body内部组件中渲染它。XX
React Components的结构为：
app
-X
-Y (in Full Screen)
现在的结构应如下所示：
<body>
<div class="X">
<div class="Y">
</div>
</div>
</body>
呈现的流应为：
app.body
-X
-Y
DOM结构应为：
<body>
<div class="X">
</div>
<div class="Y">
</div>
</body>
我怎样才能做到这一点。另外，我正在使用ES6类来制作react-components。