React和Vue的区别以及用法

1.首先我们了解到我们为什么要使用这种第三方的框架？

-更好的编写前端代码以及代码整体的逻辑性和可维护性大大提高。

-框架集成了一些开发中必须要用到的插件和扩展，例如打包工具和路由管理..

-开发的效率要大大提高，而且一套代码基本可以重复利用。

-等等..

2.React和Vue的区别？

-数据绑定：Vue使用双向数据绑定，即模型改变视图，视图改变模型。这使得Vue在表单输入和应用状态之间的双向绑定上更加方便。而React则采用单向数据流，数据的改变需要通过调用setState方法。

-组件化：React推崇高度的组件化，将HTML代码写在JavaScript中，这种方式被称为JSX。而Vue也推崇组件化，但是Vue更倾向于在一个.vue文件中包含模板、逻辑和样式三部分。

-社区和生态：React由Facebook维护，社区活跃，生态丰富。Vue由尤雨溪（Evan You）创立并维护，社区相对较小，但发展迅速，生态也在不断完善。

-性能：两者在性能上都表现优秀，但在某些场景下，由于React采用了虚拟DOM和diff算法，可能会比Vue有更好的性能。

3.函数组件和类组件的区别？

-类组件中有实例以及生命周期的方法等等，相对于函数组件来说可能更重一些。（this宇宙）

-类组件可以调用react的一些生命周期的方法像componentDidMount，componentDidUpdate,并且需要继承React.component这个类，还需要内部实现一个render方法

4.React中的hooks用法？

---useState()

const [state, setState] = useState(initalState); // 初始化，state可以任意命名 
// ... 
setState(newState); // 修改state的值

---useEffect()

useEffect(() => {
  // 此处编写 组件挂载之后和组件重新渲染之后执行的代码
  ...

  return () => {
    // 此处编写 组件即将被卸载前执行的代码,清除函数
    ...
  }
}, [dep1, dep2 ...]); // 依赖数组，空数组作为依赖，那么副作用函数只会在组件挂载（mount）时执行一次，并且在组件卸载（unmount）时执行清理操作

---useLayoutEffect 是在dom生成之后，layout还没开始之前执行

---useMemo 是为了减少组件重新渲染时不必要的函数计算，可以用来做性能优化。

const total = useMemo(() => {
        // 求和计算
        let temp = 0;
        for(let i = num; i > 0; i--) {
            temp += i;
        }
        return temp;
    }, [num] //依赖数组，当依赖改变才会执行函数);

----useCallback  返回的是那个计算函数，避免重复申明一个函数

const funcHang = useCallback(function() {
        console.log("function run:", count1, count2);
    }, [count1]//依赖数组，当其中内容发生改变了才会导致整个函数重新渲染);

----React.memo()  包裹组件，防止组件重新渲染

function Demo(props) {
  // ...
}
function compare(prevProps, nextProps) {
  // 自己写对比逻辑，返回 true 更新，false 跳过更新
  // return false
}
export default React.memo(Demo, compare)

---useRef() 获取dom元素

const xxxRef = useRef(inputRef);
// 使用 xxxRef.current 获取引用的值 
<input ref={inputRef} id="my-input" />

---useImperativeHandle.  暴露组件内的一些方法和数据，供父父组件使用

 useImperativeHandle(ref, () => {
        return {
            addCount: () => {
                setCount(count + 1);
            },
            value: 2
        }
    });

---useContext.  可以用于父子组件传值层级较深的地方使用

 const UserContext = React.createContext();//也可以单独编写一个js文件然后引入

function Demo() {
	// 如果React.createContext没有指定默认值，也可以在对应子组件上套上UserContext.Provider来指定值
    return (
        // <UserContext.Provider value={{ name: '张三' }}>
            <Child />
        // </UserContext.Provider>
    )
}


function Child() {

    const user = useContext(UserContext);
    return (
        <div>
            <p>{`name: ${user.name}`}</p>
        </div>
    )
}

---useReducer 用于状态管理，要比useState要复杂的多

// 代码示例
import React, { useReducer } from 'react'

// 1.需要有一个 reducer 函数，第一个参数为之前的状态，第二个参数为行为信息
function reducer(state, action) {
    switch (action) {
        case 'add':
            return state + 1;
        case 'minus':
            return state - 1;
        default:
            return 0;
    }
}



function Demo() {

    // 2.引入useReducer，第一个参数时上面定义的reducer，第二个参数时初始值
    // 3.返回为一个数组，第一项为状态值，第二项为一个 dispatch 函数，用来修改状态值
    const [count, dispatch] = useReducer(reducer, 0);
    return (
        <div>
            <button onClick={() => { dispatch('add') }} >add</button>
            <button onClick={() => { dispatch('minus') }} >minus</button>
            <button onClick={() => { dispatch('unknown') }} >unknown</button>
            <p>{`count: ${count}`}</p>
        </div>
    );
}

export default Demo;