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;