用React开发微信小程序，这些经验与坑你不可错过

第二个坑，状态管理别照搬React全家桶。Redux、MobX那套在小程序里跑得通，但性能问题会让你怀疑人生。小程序每个页面是独立的WebView，跨页面的状态同步，你要是用Redux，得靠框架的桥接层把store串起来，这中间的数据序列化和反序列化，在低端安卓机上能卡出PPT效果。我后来学乖了，页面内用Hooks加`useState`就够了，跨页面直接走小程序的`getApp()`全局数据或者事件总线，简单粗暴但快。别为了“架构优雅”牺牲用户体验，小程序用户可没耐心等你那几百毫秒的store同步。

第三个坑，样式隔离是真坑。React里你写个全局CSS，所有组件随便用，但小程序每个组件默认样式隔离，全局样式想进组件得开`addGlobalClass`或者用`externalClasses`。更烦的是，小程序里不支持通配符选择器，你写`* { box-sizing: border-box; }`，直接报错。我有个项目，所有页面的按钮间距都不对，排查了半天，发现是某个组件的局部样式污染了全局，但小程序不报错，就是默默给你显示错。只能靠BEM命名规范加上每个组件单独写样式文件，心累但没办法。

第四个坑，生命周期你得重新学。React的`componentDidMount`和`componentWillUnmount`是组件级，但小程序的页面生命周期是`onLoad`、`onShow`、`onReady`、`onHide`这一套，而且组件还有独立的`attached`、`detached`。用Taro的时候，它会把React的生命周期映射过来，但映射并不完全。比如页面隐藏再显示，React的`useEffect`不会重新触发，但小程序的`onShow`会。我有个需求，每次进页面都要刷新数据，用React思维写在`useEffect`里，结果页面从后台切回来根本不动。只能在页面配置里手动监听`onShow`，再调用组件内部的方法，绕了一大圈。

第五个坑，列表渲染的key别乱用。React里key是优化手段，但小程序里`wx:key`用错了直接白屏或者渲染错乱。我用Taro时，习惯性给列表项加个`key={item.id}`，但小程序对key的要求更严格，必须是字符串或者数字，不能是对象。有一次我从接口拿的数据里id是数字，但有些项没id，我图省事用了index，结果列表滑动时组件状态全乱了，勾选项跳来跳去。后来强制要求后端必须给唯一id，没有就用`wx:key="*this"`兜底，但性能会下降。这个坑，新手基本必踩。

第六个坑，条件渲染和样式绑定的语法差异。React里你写`{condition && hello}`，Taro能转，但有些复杂条件，比如嵌套的ternary，转换后的代码在小程序里会报“Bad expression”错误。更隐蔽的是样式绑定，React里`style={{color: isActive ? 'red' : 'blue'}}`没问题，但小程序里如果你绑定的值是undefined，会直接报错，而且不提示哪里错了。我试过排查一个页面闪退问题，发现是某个字段为null，样式绑定炸了。现在我的习惯是，所有样式绑定前先做空值判断，或者用框架提供的`classnames`库统一处理。

第七个坑，原生组件混用是噩梦。小程序里`canvas`、`video`、`map`这些原生组件层级最高，覆盖不了，你在React里写个遮罩层想盖住它们，根本盖不住。Taro提供了`CoverView`和`CoverImage`来解决，但性能和兼容性都一般。我做地图相关的页面，弹窗只要一出现，地图就露在弹窗上面，丑得没法看。只能把地图区域缩小，或者用官方推荐的`同层渲染`，但得在特定基础库版本上才有效。这问题无解，只能绕。

别迷信“一套代码多端复用”。React写小程序，最诱人的就是能顺便输出H5和RN，但真做起来，每个端的差异会让你改到怀疑人生。H5的DOM操作、RN的原生组件、小程序的WebView，三者完全不是一回事，你为了兼容性写的条件判断，比业务代码还多。我后来想通了，项目初期就明确主端，其他端靠后，别一开始就想着完美适配。用React写小程序，核心价值是借React的组件化思维和Hooks逻辑复用能力，不是真的“一套代码通吃”。认清这一点，心态就稳了。

回头看，用React写小程序就像开一辆手动挡的跑车，动力足但换挡得勤。框架帮你处理了大部分繁琐细节，但方向盘和刹车还握在小程序手里。我的建议是：别把React的习惯全带进来，先花一天时间读透小程序官方文档，再动手写。遇到奇怪的bug，先怀疑框架转换，再怀疑自己代码。另外，多看Taro和Remax的issue区，你踩的坑前人基本都踩过，答案都在那。这条路不好走，但走通了，你的跨端能力会上一个大台阶。那些坑，都是学费，但值。