React和Vue语法差异对比我在项目中最常遇到的问题

React状态管理那些坑，我踩得差不多了

搞React这么久了，最大的感受就是状态管理真的是一门玄学。刚开始写的时候总觉得setState简单得很，后来才明白，简单的API后面藏着不少需要注意的地方。

我一般这样处理组件内部状态：

function MyComponent() {
  const [count, setCount] = useState(0);
  const [userInfo, setUserInfo] = useState({
    name: '',
    email: ''
  });

  // 这种批量更新状态的方式比较安全
  const updateUserInfo = (newData) => {
    setUserInfo(prev => ({
      ...prev,
      ...newData
    }));
  };

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>增加</button>
      <input 
        value={userInfo.name}
        onChange={(e) => updateUserInfo({name: e.target.value})}
      />
    </div>
  );
}

这里有个关键点，我建议始终使用函数式更新（c => c + 1 这种形式），特别是在异步操作或者多次点击的场景下。之前我就遇到过连续点击按钮，state没有按预期更新的问题，改成函数式更新后就解决了。

这几种错误写法，别再踩坑了

最常见的一个错误就是直接修改state引用：

// 错误写法 - 直接修改对象引用
function BadComponent() {
  const [list, setList] = useState([{id: 1, name: 'item1'}]);
  
  const addItem = () => {
    list.push({id: 2, name: 'item2'}); // 这样修改不会触发重新渲染！
    setList(list); // 这里传的是同一个引用
  };
}

这种写法我当时查了好久才发现问题，因为list数组的引用没变，React认为数据没变化就不更新了。正确的做法是创建新数组：

// 正确写法
const addItem = () => {
  setList(prev => [...prev, {id: 2, name: 'item2'}]);
};

另一个坑是useEffect依赖数组写错。我有一次写了这样的代码：

// 错误写法 - 依赖数组有问题
function ProblematicComponent() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetchData().then(setData);
  }, [data]); // 这样会无限循环！
}

data作为依赖项会导致每次更新都重新执行effect，结果就是不断请求接口。后来我改成了这样：

// 正确写法
useEffect(() => {
  if (!data) {
    fetchData().then(setData);
  }
}, []); // 或者去掉data依赖

Vue响应式系统的老司机经验

Vue这边我也踩过不少坑，特别是数组和对象的响应式更新。最经典的例子就是数组索引直接赋值：

export default {
  data() {
    return {
      items: ['apple', 'banana', 'orange']
    }
  },
  methods: {
    updateItem() {
      // 错误做法 - Vue无法检测到这种变化
      this.items[0] = 'new apple';
      
      // 正确做法
      this.$set(this.items, 0, 'new apple');
      // 或者
      this.items.splice(0, 1, 'new apple');
    }
  }
}

这个问题我第一次遇到时简直懵了，明明改了数据界面就是不更新。后来才知道Vue的响应式系统有这个限制，现在我都习惯用splice来处理数组项的替换。

还有computed属性的陷阱，很多人不知道computed也有缓存机制：

// 这样写可能有问题
computed: {
  currentTime() {
    return Date.now(); // 这个值不会实时更新！
  }
}

因为computed是基于依赖进行缓存的，如果依赖不发生变化，计算属性就不会重新计算。正确的做法是：

data() {
  return {
    now: Date.now()
  }
},
computed: {
  currentTime() {
    return this.now;
  }
},
mounted() {
  setInterval(() => {
    this.now = Date.now(); // 主动触发更新
  }, 1000);
}

vuex和redux的实际应用心得

对于大型项目的全局状态管理，我还是倾向于用vuex或redux。不过这两个东西的学习曲线确实陡峭，特别是Redux中间件那一套。

我现在写Redux的状态更新通常是这样：

// action types
const UPDATE_USER_INFO = 'UPDATE_USER_INFO';

// reducer
const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_USER_INFO:
      return {
        ...state,
        userInfo: {
          ...state.userInfo,
          ...action.payload
        }
      };
    default:
      return state;
  }
};

// action creator
const updateUserInfo = (userData) => ({
  type: UPDATE_USER_INFO,
  payload: userData
});

关键是记住reducer必须是纯函数，不能有副作用，也不能直接修改state对象。这个原则我在早期经常违背，导致一些奇怪的bug。

vuex这边相对简单一些，但是action和mutation的区别需要理解清楚：

// vuex store
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment'); // action中调用mutation来改变state
      }, 1000);
    }
  }
})

mutation负责同步状态变更，action负责异步操作和业务逻辑，这是两个概念不能混用。

性能优化的一些实际技巧

状态管理不只是写法问题，还涉及到性能优化。React这边我常用React.memo来避免不必要的重渲染：

const ExpensiveComponent = React.memo(({ data }) => {
  return (
    <div>
      {/* 渲染大量数据 */}
    </div>
  );
}, (prevProps, nextProps) => {
  // 自定义比较函数
  return prevProps.data.id === nextProps.data.id;
});

但要注意，React.memo本身也有开销，不要滥用。只有在确定组件渲染频繁而且props变化不多的情况下才用。

Vue这边用v-memo（Vue 3.2+）可以达到类似效果：

<template>
  <div v-for="item in list" :key="item.id">
    <MemoComponent 
      :item="item" 
      :v-memo="[item.id, item.updatedAt]"
    >
      {{ item.content }}
    </MemoComponent>
  </div>
</template>

最后说个重要的：无论是React还是Vue，状态树的设计都要合理。不要把所有状态都放在顶层，也不要过度拆分。我在一个项目中就犯过这个错误，把每个表单字段都单独管理，结果代码变得特别复杂。

实际项目中的坑和解决方案

在实际项目中，我遇到过父子组件通信的复杂场景。比如一个表格组件既要接受外部数据，又要向父组件传递用户的编辑操作：

// 子组件
function Table({ initialData, onDataChange }) {
  const [localData, setLocalData] = useState(initialData);
  
  const handleEdit = (id, newData) => {
    const updated = localData.map(item => 
      item.id === id ? {...item, ...newData} : item
    );
    setLocalData(updated);
    onDataChange(updated); // 同时通知父组件
  };
  
  // 这里注意要监听initialData的变化
  useEffect(() => {
    setLocalData(initialData);
  }, [initialData]);
  
  return (
    <table>
      {/* 表格渲染逻辑 */}
    </table>
  );
}

这种双向绑定的模式要特别小心，容易造成状态不一致。后来我发现更好的方式是采用受控组件模式，统一在父组件管理状态。

还有跨组件的状态共享问题，我以前喜欢用event bus或者全局变量，现在基本都改用Context API或provide/inject了。虽然写法稍微复杂一点，但是状态流更清晰，调试也更容易。

以上是我踩坑后的总结，希望对你有帮助。这个领域更新很快，新的模式和工具层出不穷，大家还是要根据具体项目情况选择合适的方案。