该useEffect阵营钩将运行在功能上传递的每一个变化.这可以进行优化,只有在所需的属性发生变化时才能调用它.
如果我想调用初始化函数componentDidMount而不是在更改时再调用它会怎么样？假设我想加载一个实体,但加载函数不需要组件中的任何数据.我们怎么能用useEffect钩子做这个？
class MyComponent extends React.PureComponent {
componentDidMount() {
loadDataOnlyOnce();
}
render() { ... }
}
使用钩子,这可能是这样的:
function MyComponent() {
useEffect(() => {
loadDataOnlyOnce(); // this will fire on every change :(
}, [...???]);
return (...);
}
根据文件:
componentDidUpdate()更新发生后立即调用.初始渲染不会调用此方法.
我们可以使用新的useEffect()钩子来模拟componentDidUpdate(),但似乎useEffect()是在每次渲染之后运行,甚至是第一次.如何让它不能在初始渲染上运行？
正如您在下面的示例中所看到的,componentDidUpdateFunction在初始渲染期间打印,但componentDidUpdateClass在初始渲染期间未打印.
function ComponentDidUpdateFunction() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
console.log("componentDidUpdateFunction");
});
return (
<div>
<p>componentDidUpdateFunction: {count} times</p>
<button
onClick={() => {
setCount(count + 1);
}}
>
Click Me
</button>
</div>
);
}
class ComponentDidUpdateClass extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
componentDidUpdate() {
console.log("componentDidUpdateClass");
}
render() {
return (
<div>
<p>componentDidUpdateClass: {this.state.count} times</p>
<button
onClick={() => { …tldr; 如何模拟componentDidUpdate或以其他方式使用key数组来强制重置组件？
我正在实现一个显示计时器的组件,并在达到零时执行回调.目的是让回调更新对象列表.后一个组件由新的React钩子 useState和useEffect.
它state包含对计时器启动时间和剩余时间的引用.该effect套间隔称为每秒钟更新的剩余时间,并检查是否回调应该叫.
该组件并不意味着重新安排定时器,或者当它达到零时保持间隔,它应该执行回调和空闲.为了让计时器刷新,我希望传递一个数组,key这将导致组件的状态被重置,因此计时器将重新启动.不幸的是key必须与字符串一起使用,因此我的数组的引用是否已更改不会产生任何影响.
我还试图通过传递我关注的数组来推动对道具的更改,但状态得到维护,因此间隔未重置.
为了强制仅使用新的钩子API更新状态,在数组中观察浅层更改的首选方法是什么？
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
function getTimeRemaining(startedAt, delay) {
const now = new Date();
const end = new Date(startedAt.getTime() + delay);
return Math.max(0, end.getTime() - now.getTime());
}
function RefresherTimer(props) {
const [startedAt, setStartedAt] = useState(new Date());
const [timeRemaining, setTimeRemaining] = useState(getTimeRemaining(startedAt, props.delay));
useEffect(() => {
if (timeRemaining <= 0) …我已经通过了React v16.7.0中引入的钩子。
https://reactjs.org/docs/hooks-intro.html
因此，我对钩子的理解是，我们可以在功能组件中使用状态，而无需在react中编写类组件。这真是一个了不起的功能。
但是我对在功能组件中使用钩子一无所知。
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
如果使用钩子，如何在上述功能组件中使用生命周期方法？
我没有找到任何关于如何使用与 socket.io 反应从快速服务器获取数据的示例。
现在我做这样的事情：Server.js
io.on('connection', socket => {
console.log(socket.id)
socket.on('disconnect', () => {
console.log(socket.id + ' disconnected')
})
socket.on('load settings', () => {
socket.emit('settings is here', data)
})
})
React.js
const [socket] = useState(io())
const [settings, setSettings] = useState(false)
useEffect(() => {
try {
socket.emit('load settings');
socket.on('settings is here', (data) => {
// we get settings data and can do something with it
setSettings(data)
})
} catch (error) {
console.log(error)
}
}, [])
我的公司正在使用recompose作为我们的状态管理工具。我们正在重构我们的应用程序以使用钩子。对于以下代码，如何用react hook组件替换重组组件？
我知道withState变成useState，例如：
withState('something', 'setSomething', null)
变成
const [something, setSomething] = useState(null);
会是什么withProps，withHandlers，compose，hoistStatics和lifecycle改变？
怎么会mapStateToProps和mapDispatchToProps工作？
import { compose, hoistStatics, withHandlers, withState, withProps, lifecycle } from 'recompose';
import { connect } from 'react-redux'
import myComponent from './myComponent'
const mapStateToProps = (state, props) => {
return {
}
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({
}, dispatch)
};
const enhancer = compose(
connect(mapStateToProps,mapDispatchToProps),
withProps(props => ({
myProp: …