关于React开发一些常见问题的技术分享

背景

近期由于项目进度需要和人员问题，临时从事React前端开发方面工作，很久没有开发过React了，拿起来不免有些生疏，再加上新上手ReactHook，遇到了不少问题，在这里总结分享一下。

基础前端问题

''和""以及``的问题

在我们项目中一般统一使用’’，“”被禁止使用。``在写一些比较长的字符长操作的情况可能会使用，React使用的还是比较少的，以前写JQuery时确实用的很多。

数组的操作

有了es6的扩充js的数组操作的易用性大幅提高

• map，几乎是人尽皆知的，主要用作历遍数组，只有一个输入参数
• foreach，跟java的foreach不一样的是，这个除了value还有index作为第二个参数，再需要序号时最好使用这个
• filter，顾名思义用于过滤数据，return 0为去掉，1为保留
• find，数组中寻找值的api

展开操作符

对象展开
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

React常见的调用问题

如何调用父组件方法或属性props

使用处：

  <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);

如何广泛的调用一个组件的方法

Redux

整体的事件管理

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();

ReactHook常见问题

数组的修改问题

这个可能是不熟悉的人最容易出现问题的地方了
有问题的写法

[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打印

实际上是新建了一个数组，让指针发生变化，强制状态变化。

回调中无法获取state的更新值

错误写法

[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])