一、react与vue的区别(个人观点)
react对于js的语法更加看重,因为vue对于语法的封装更加细节,而react更多是对于js的操作,而且在vue中不看重‘this’,在react的类式组件中对于this很重要,很多操作都需要this才能完成,在路由的定义上vue和react逐渐靠拢。
二、类式组件和函数式组件
在react中,一个组件就是一个类或者是一个函数,类式组件继承自React.Component,在类式组件中‘this’很重要,里面有props,state,ref,setstate等,而在函数式组件中没有this这个定义。在类式组件中定义函数,如给onClick里定义一个函数,一定要this.xxx(函数名),并且在类中要写匿名函数才行,在函数式组件就直接定义函数,而且在类式组件中有许多react的生命周期可以用,如componentwillmount,componentdidmount。而函数式组件只有useEffect。
三、PureComponent
当我们没有更新任何数据时而不想render来增加成本,PureComponent就起了作用,PureComponent底层调用了shouldComponentupdate,该函数传入nextstate、nextprops作为参数,返回一个布尔值,在其中判断,如果nextstate和nextprops与当前的都没有变,就返回false,组件就不会render。
四、路由(16.8后版本)
tips:在最外层要包裹BrowserRouter,否则路由无效 web端用的是react-router-dom,路由使用有几步走,首先写一个js文件,在其中保存着路由信息
如这样,其中path对应路由地址,element是对应的组件,其中Redirect的实现是在element中写navigate 里面to接上redirect去的地址,然后在路由跳转的最外层的组件中导入此路由信息js文件,使用useroutes(路由信息js文件),在内层就可以用router里封装的outlet来显示路由界面,跳转可以用Link和Navlink。
五、路由跳转传参
params
使用params时,值直接在路由地址上传,然后接收的话要在规定好的路由信息上提前写好参数接收,类式组件接收直接在this里取值,函数式组件要用useparams里接收。
search
search也是值直接在路由地址上传,接收的时候不需要提前写好参数接收,/?xxx=xxx&&xxx=xxx,函数式组件要用usesearchparams来接收。
state
state传值时要写一个对象,函数式组件要用useLocation来接收。
六、编程式路由跳转
在函数式组件中编程式路由跳转是底层是用的history,此history不是web里的history,而是react对于history的封装,history在this.props里,函数式组件里是用usenavigate来跳转,对于usenavigate跳转传参目前用state最多。
七、react-redux
redux使用的目的是对于多个组件都依赖一个数据或者一个组件的操作影响另一个组件,首先是关于数据存储的方面,首先要创建一个store,一个项目只能有一个store,在store中定义多个reducers,在reducers里是对于数据的处理,reducers接收action对象,action里包括type和data,分别是进行的处理和处理的数据,一般会专门写一个actioncreate,用于专门创建action对象。对于redux存储的数据的使用,一般将要使用redux的组件放在container文件里,使用react-redux里内置的connect函数,用法是定义一个外部容器和一个内部UI组件,然后将容器在页面上渲染,但实际渲染的是内部的UI组件,容器通过props与redux连接,而通过props来与UI连接,容器就像一个桥梁,将redux与UI连接。
八、useEffect
useEffect里有两个参数,第一个参数是一个函数,在该函数中可以写对于组件初始化要进行的操作,第二个参数是对于变量的监测,如果不写就都监测,如果写一个空数组就是都监测。