对比 React Hooks 和 Vue Composition API

import React, { useState, useEffect } from "react";
const NoteForm = ({ onNoteSent }) => {  const [currentNote, setCurrentNote] = useState("");  useEffect(() => {    console.log(`Current note: ${currentNote}`);  });  return (          onSubmit={e => {        onNoteSent(currentNote);        setCurrentNote("");        e.preventDefault();      }}    >              Note:                   value={currentNote}          onChange={e => {            const val = e.target.value && e.target.value.toUpperCase()[0];            const validNotes = ["A", "B", "C", "D", "E", "F", "G"];            setCurrentNote(validNotes.includes(val) ? val : "");          }}        />            Send      );};

function App(){  const [name, setName] = useState('demo');  if(condition){    const [val, setVal] = useState('');      }}

// React 文档中的示例代码：function Form() {  // 1. Use the name state variable  const [name, setName] = useState('Mary');
  // 2. Use an effect for persisting the form  if (name !== '') {    useEffect(function persistForm() {      localStorage.setItem('formData', name);    });  }  // 3. Use the surname state variable  const [surname, setSurname] = useState('Poppins');
  // 4. Use an effect for updating the title  useEffect(function updateTitle() {    document.title = `${name} ${surname}`;  });  // ...}

useEffect(function persistForm() {  if (name !== '') {    localStorage.setItem('formData', name);  }});

export default {  setup() {    // 1. Use the name state variable    const name = ref("Mary");    // 2. Use a watcher for persisting the form    if(name.value !== '') {      watch(function persistForm() => {        localStorage.setItem('formData', name.value);      });    }   // 3. Use the surname state variable   const surname = ref("Poppins");   // 4. Use a watcher for updating the title   watch(function updateTitle() {     document.title = `${name.value} ${surname.value}`;   });  }}

watch(function persistForm() => {  if(name.value !== '') {    localStorage.setItem('formData', name.value);  }});

const [name, setName] = useState("Mary");const [age, setAge] = useState(25);console.log(`${name} is ${age} years old.`);

const initialState = {count: 0};
function reducer(state, action) {  switch (action.type) {    case 'increment':      return {count: state.count + 1};    case 'decrement':      return {count: state.count - 1};    default:      throw new Error();  }}const [state, dispatch] = useReducer(reducer, initialState);
dispatch({type: 'increment'}); // state 就会变为 {count: 1}

const name = ref("Mary");const age = ref(25);watch(() => {  console.log(`${name.value} is ${age.value} years old.`);});

const state = reactive({  name: "Mary",  age: 25,});watch(() => {  console.log(`${state.name} is ${state.age} years old.`);});

// toRefs() 则将反应式对象转换为普通对象，该对象上的所有属性都自动转换为 reffunction useFeatureX() {  const state = reactive({    foo: 1,    bar: 2  })   return toRefs(state)} const {foo, bar} = useFeatureX();

// 传递一个依赖项的数组作为 useEffect hook 的第二个参数，只有当 name 改变时才会更新 localStoragefunction Form() {  const [name, setName] = useState('Mary');  const [surname, setSurname] = useState('Poppins');  useEffect(function persistForm() {      localStorage.setItem('formData', name);  }, [name]);
  // ...}

export default {  setup() {    const name = ref("Mary");    const lastName = ref("Poppins");    watch(function persistForm() => {      localStorage.setItem('formData', name.value);    });  }}

useEffect(() => {  console.log("This will only run after initial render.");  return () => { console.log("This will only run when component will unmount."); };}, []);

setup() {  onMounted(() => {    console.log(`This will only run after initial render.`);   });  onBeforeUnmount(() => {    console.log(`This will only run when component will unmount.`);  });}

// custom hook - 用于当 value 改变时向控制台打印日志export function useDebugState(label, initialValue) {  const [value, setValue] = useState(initialValue);  useEffect(() => {    console.log(`${label}: `, value);  }, [label, value]);  return [value, setValue];}
// 调用 const [name, setName] = useDebugState("Name", "Mary");

export function useDebugState(label, initialValue) {  const state = ref(initialValue);  watch(() => {    console.log(`${label}: `, state.value);  });  return state;}
// elsewhere:const name = useDebugState("Name", "Mary");

const MyComponent = () => {  const divRef = useRef(null);  useEffect(() => {    console.log("div: ", divRef.current)  }, [divRef]);
  return (    
      
My div    
  )}

export default {  setup() {    const divRef = ref(null);    onMounted(() => {      console.log("div: ", divRef.value);    });
    return () => (      
        
My div      
    )  }}

const [name, setName] = useState("Mary");const [age, setAge] = useState(25);const description = `${name} is ${age} years old`;

const name = ref("Mary");const age = ref(25);const description = computed(() => `${name.value} is ${age.value} years old`);

function fibNaive(n) {  if (n <= 1) return n;  return fibNaive(n - 1) + fibNaive(n - 2);}const Fibonacci = () => {  const [nth, setNth] = useState(1);  const nthFibonacci = useMemo(() => fibNaive(nth), [nth]);  return (    
              Number:                  type="number"          value={nth}          onChange={e => setNth(e.target.value)}        />            
nth Fibonacci number: {nthFibonacci}    
  );};

// context objectconst ThemeContext = React.createContext('light');
// provider
// consumerconst theme = useContext(ThemeContext);

// key to provideconst ThemeSymbol = Symbol();
// providerprovide(ThemeSymbol, ref("dark"));
// consumerconst value = inject(ThemeSymbol);

const Fibonacci = () => {  const [nth, setNth] = useState(1);  const nthFibonacci = useMemo(() => fibNaive(nth), [nth]);  return (    
              Number:                  type="number"          value={nth}          onChange={e => setNth(e.target.value)}        />            
nth Fibonacci number: {nthFibonacci}    
  );};

}