为什么你3年React还是不懂JavaScript？｜从框架的舒适区逃离

// 他的代码
const [loading, setLoading] = useState(false);

const handleClick = () => {
  setLoading(true);
  console.log(loading); // 他期望是true，结果是false
  
  fetch('/api/data')
    .then(res => res.json())
    .then(data => {
      setLoading(false);
    });
};

// useEffect里的代码
useEffect(() => {
  const data = fetchUserData();
  setUser(data);  // 这里setUser
  setLoading(false); // 这里又setLoading
  
  // 结果触发了三次render：初始 → setUser → setLoading
}, []);

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(1);
  console.log(count); // 期望1，实际0
  
  setCount(2);
  console.log(count); // 期望2，实际还是0
};

useEffect(() => {
  console.log('userId:', userId);
  
  fetch(`/api/user/${userId}`)
    .then(setUser);
}, []); // 依赖数组为空

// userId改变时，fetch还是用的旧userId

useEffect(() => {
  // ...
}, [userId]);

// 现在userId改变时，effect会重新运行，没问题了

const [results, setResults] = useState([]);

const handleSearch = (query) => {
  fetch(`/api/search?q=${query}`)
    .then(res => res.json())
    .then(data => setResults(data));
};

// 用户快速搜索："a" → "ab" → "abc"
// 三个请求同时发出
// 但返回顺序可能是 response 3 → response 1 → response 2
// 最后显示的是response 2的过时数据，用户看到的搜索结果是错的

学习难度 ▲
        │
      5 │         ╱─── React高级特性
        │        ╱
      4 │       ╱
        │      ╱  ← 你在这就能写出工作代码
      3 │     ╱
        │    ╱
      2 │   ╱
        │  ╱
      1 │ ─────── JavaScript基础
        │
        └──────────────────────► 时间

let count = 0;

const increment = () => {
  count++;
  render(); // 还要手动重新渲染
};

function render() {
  document.querySelector('#count').textContent = count;
}

const [count, setCount] = useState(0);
// React自动处理：状态更新、render触发、DOM更新

领导：这个bug怎么修？
你：看看代码……可能改这里试试？
结果：好了
领导：很好，继续

useEffect(() => {
  // 这样对吗？
  const fetchData = async () => {
    const res = await fetch('/api/data');
    const data = await res.json();
    setData(data);
  };
  
  fetchData();
}, []);

const state = {
todos: [],
filter: 'all'
};

// 添加todo
const addButton = document.querySelector('#add');
addButton.addEventListener('click', () => {
const input = document.querySelector('#input');
  state.todos.push(input.value);

// 现在需要更新UI
// 怎么更新？
});

class StateManager {
constructor(initialState) {
    this.state = initialState;
    this.listeners = [];
  }

  setState(updates) {
    this.state = { ...this.state, ...updates };
    this.listeners.forEach(fn => fn());
  }

  subscribe(fn) {
    this.listeners.push(fn);
  }
}

state.todos.forEach((todo, index) => {
  const editBtn = document.createElement('button');
  editBtn.textContent = '编辑';
  
  editBtn.addEventListener('click', () => {
    console.log(`编辑第${index}个`); // 问题：这输出的总是最后一个index
  });
  
  li.appendChild(editBtn);
});

function makeEditHandler(todoId) {
  return function() {
    console.log(`编辑todo ${todoId}`);
  };
}

state.todos.forEach((todo, i) => {
  const editBtn = document.createElement('button');
  editBtn.addEventListener('click', makeEditHandler(todo.id));
});

function useState(initialValue) {
let state = initialValue;

return [
    state,
    function setState(newValue) {
      state = newValue; // 这个setState会"记住"这个特定的state变量
    }
  ];
}

// 每次调用useState，都会创建新的闭包
const [count, setCount] = useState(0); // 这个setCount的闭包里的state是count
const [name, setName] = useState('');  // 这个setName的闭包里的state是name

input.addEventListener('change', () => {
  const version = ++requestVersion;
  
  fetch('/api/todos', { method: 'POST', body: JSON.stringify(state.todos) })
    .then(res => res.json())
    .then(data => {
      // 问题1：如果有多个fetch，返回顺序可能不同
      // 问题2：数据怎样才能及时更新
      // 问题3：用户快速操作时会发生什么
      setTodos(data);
    });
});

console.log('1');
fetch('/api').then(() => console.log('2'));
console.log('3');

// 输出是 1 → 3 → 2，不是 1 → 2 → 3

console.log('1');

setTimeout(() => {
console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
console.log('promise');
});

console.log('2');

// 输出：1 → 2 → promise → setTimeout
// 因为Promise是微任务，setTimeout是宏任务
// 微任务总是在宏任务之前执行

// 用户快速改三个值，触发三个fetch
// request 1, 2, 3同时发出
// 但response可能这样返回：3先到 → 2后到 → 1最后到
// 结果UI会显示过时的数据

// 解决方案：添加版本号
let latestVersion = 0;

input.addEventListener('change', () => {
const version = ++latestVersion;

  fetch('/api/save', {...})
    .then(res => res.json())
    .then(data => {
      if (version === latestVersion) {
        // 只处理最新的请求
        updateUI(data);
      }
    });
});

useEffect(() => {
let mounted = true;

const fetchData = async () => {
    const res = await fetch('/api/data');
    const data = await res.json();
    
    if (mounted) {
      setData(data);
    }
  };

  fetchData();

return() => { mounted = false; };
}, []);

           React              原生JavaScript
       ────────────────────────────────────
开发速度    超快                很慢
学习难度    中等                高
代码量      少                  多
性能        好                  取决于你
理解深度    浅                  深

对初学者：React让你快速建立成就感
对老手：原生JavaScript让你真正懂编程

// React Hooks的工作原理简化版
let componentHooks = [];
let hookIndex = 0;

function useState(initialValue) {
const currentIndex = hookIndex++;

if (!componentHooks[currentIndex]) {
    componentHooks[currentIndex] = initialValue;
  }

const setState = (newValue) => {
    componentHooks[currentIndex] = newValue;
    reRender();
  };

return [componentHooks[currentIndex], setState];
}

// 现在你明白了：
// 1. 为什么不能在条件里调用Hooks（会导致hookIndex错误）
// 2. 为什么不能改变调用顺序（顺序就是mapping关键）
// 3. 为什么setCount能记住count（闭包）

console.log('sync 1');

setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise'));

console.log('sync 2');

// 思考为什么这个顺序是 sync 1 → sync 2 → promise → timeout

// ❌ 容易出bug
const handleSearch = (query) => {
  fetch(`/api/search?q=${query}`)
    .then(res => res.json())
    .then(setResults); // 如果有多个请求，返回顺序不同就buggy
};

// ✅ 正确
const handleSearch = (() => {
let latestQuery = null;

return(query) => {
    latestQuery = query;
    fetch(`/api/search?q=${query}`)
      .then(res => res.json())
      .then(data => {
        if (latestQuery === query) {
          setResults(data);
        }
      });
  };
})();