近期由于项目进度需要和人员问题,临时从事React前端开发方面工作,很久没有开发过React了,拿起来不免有些生疏,再加上新上手ReactHook,遇到了不少问题,在这里总结分享一下。
在我们项目中一般统一使用’’,“”被禁止使用。``在写一些比较长的字符长操作的情况可能会使用,React使用的还是比较少的,以前写JQuery时确实用的很多。
有了es6的扩充js的数组操作的易用性大幅提高
对象展开
a={a:123};b={…a,b:456}//{a:123,b:456}
数组展开
A=[1,2,3,4];b=[…A,5,6,7]//1,2,3,4,5,6,7
字符串展开
A=“abc”;b=[…a,’d’];//a,b,c,d
使用处:
<CustomPlotWidget
onClear={
() => {
form.resetFields()
}}
cpId={
cpId}
/>
组件内
const {
plotting, viewer, onChange, initialValue, cpId, plotFileName, onClear} = props;
父组件
const disasterListComponent = useRef();
disasterListComponent.current.hideUpdate()
<DisasterList ref={
disasterListComponent} />;
子组件
const DisasterList =(props,ref)=>{
useImperativeHandle(ref, () => ({
method: xxx,
}));
}
export default forwardRef(DisasterList);
整体的事件管理
const index = (state = indexInitialState, action) => {
switch (action.type) {
case ActionTypes.DEFINE_SUPER_MAP:
return {
...state,
superMap: action.value
};
default:
return state
}
}
被调用组件内,调用dispatch
const onMapIniComplete = (superMap) => {
dispatch(Actions.defineSuperMap(superMap));
};
调用方
const superMap = useSelector(state => state.index.superMap);
sueprMap.XXX();
这个可能是不熟悉的人最容易出现问题的地方了
有问题的写法
[array,setArray]=useState([]);
useEffect(() => {
console.log(array)
}, [array])
array.push("hello");
setArray(array)//这里不会触发useEffect内的console打印
正确写法
[array,setArray]=useState([]);
useEffect(() => {
console.log(array)
}, [array])
array.push("hello");
setArray([...array])//这里会触发useEffect内的console打印
实际上是新建了一个数组,让指针发生变化,强制状态变化。
[cpTopic,setCpTopic]=useState("");
useEffect(() => {
if (!cpTopic) {
return;
}
let apiUtil = new ApiUtil();
let client = apiUtil.mqttInit();
client.on('connect', function () {
client.subscribe(cpTopic);
});
// let mqttCount = 0;
client.on('message', (topic, message) => {
console.log(cpTopic);
});
setMqttClient(client);
return () => {
client.unsubscribe(cpTopic);
};
}, [cpTopic])
setCpTopic("hello")
大部分人都会认为会打印出hello,但实际上会打印出"",因为这里cpTopic是无法获取cpTopic的更新的。
[cpTopic,setCpTopic]=useState("");
[messageEvent,setMessageEvent]=useState({
});
useEffect(() => {
if (!cpTopic) {
return;
}
let apiUtil = new ApiUtil();
let client = apiUtil.mqttInit();
client.on('connect', function () {
client.subscribe(cpTopic);
});
// let mqttCount = 0;
client.on('message', (topic, message) => {
setMessageEvent({
content:message});
});
setMqttClient(client);
return () => {
client.unsubscribe(cpTopic);
};
}, [cpTopic])
useEffect(() => {
log.console(messageEvent.content);
}, [messageEvent])