能否通过script标签内的全局外部函数修改React函数组件state？

核心逻辑是利用window全局对象做通信桥梁：安卓WebView调用的全局函数挂载在window上，React组件挂载时将内部状态更新方法暴露到window全局供全局函数调用，卸载时清理全局挂载避免冲突。

第一步：修正全局函数定义 #

head里的全局函数必须显式挂载到window对象才能被安卓WebView稳定识别，增加组件未挂载时的容错判断：

<head>
  <script>
    window.webViewAndriodInteraction = function(param1) {
      // 确认React组件已挂载、状态方法已注册后再执行更新
      if (typeof window._liveScreenSetState === 'function') {
        window._liveScreenSetState(param1);
      }
    }
  </script>
</head>

第二步：在React函数组件中注册全局状态更新方法 #

借助useEffect处理组件挂载/卸载生命周期，将内部useState的更新方法暴露到全局，同时修复原代码中状态变量未绑定渲染的问题：

import { useState, useEffect } from 'react';

function LiveScreen(props) {
  const [somedata, setSomeState] = useState(null);

  useEffect(() => {
    // 组件挂载时，将状态更新方法挂载到全局
    window._liveScreenSetState = (receiveParam) => {
      // 如有需要可在这里对安卓传过来的参数做格式转换
      setSomeState(receiveParam);
    };

    // 组件卸载时清理全局挂载的方法，避免内存泄漏、多页面方法冲突
    return () => {
      delete window._liveScreenSetState;
    };
  }, []);

  // 渲染状态时需要用{}包裹变量，否则只会渲染静态文本
  return <h1>{somedata}</h1>;
}

可选优化（处理组件未挂载时的提前调用） #

如果存在安卓端在React页面还没加载完成就调用全局函数的场景，可以在全局函数里增加参数缓存队列，组件挂载后自动消费缓存的调用参数：

<head>
  <script>
    // 初始化缓存队列
    window._webViewCallCache = [];
    window.webViewAndriodInteraction = function(param1) {
      if (typeof window._liveScreenSetState === 'function') {
        window._liveScreenSetState(param1);
      } else {
        // 组件未挂载时先把参数存到队列
        window._webViewCallCache.push(param1);
      }
    }
  </script>
</head>

对应修改React组件的useEffect逻辑，挂载后先消费缓存：

useEffect(() => {
  window._liveScreenSetState = (receiveParam) => {
    setSomeState(receiveParam);
  };

  // 消费挂载前缓存的调用参数
  if (window._webViewCallCache?.length) {
    window._webViewCallCache.forEach(param => setSomeState(param));
    window._webViewCallCache = [];
  }

  return () => {
    delete window._liveScreenSetState;
  };
}, []);

注意事项 #

• 全局挂载的方法/变量名建议加业务专属前缀，不要和window原生属性、其他第三方脚本的全局变量重名，避免覆盖冲突
• 如果需要传递复杂参数，建议安卓端和前端约定好JSON格式的字符串传参，前端拿到后用JSON.parse转成对象使用
• 空依赖数组的useEffect只会在组件首次挂载、卸载时执行，不会因为组件重渲染重复注册全局方法

内容的提问来源于stack exchange，提问作者Hamza Akhtar