react+JS语法

前端成长笔记

已于 2023-02-02 17:16:13 修改

阅读量107

点赞数

文章标签：前端

于 2022-04-19 10:48:30 首次发布

本文链接：https://blog.csdn.net/ds0604/article/details/124268083

版权

1、if和else的使用

if（）
else()

if (time < 10) {
    greeting = "Good morning";
 } else if (time < 18) {
    greeting = "Good day";
 } else if (time < 22) {
    greeting = "Good night";
 } else {
    greeting = "Good evening";
 }

2、给对象或者数组添加属性和方法

var User=new createModule('hello','haha')
function createModule(str1,str2){
   createModule.prototype.name=str1;//定义name属性值为hello
   createModule.prototype.voice=str2;
   createModule.prototype.contactFun=function (){
      return User.name+','+User.voice
   };
}
console.log(User.contactFun())//hello,haha

3、Json.parse的使用

解析空字符串 json.parse('{}')
需要注意的是，（‘{}’）解析出来是{}，如果需要数组的话就写成（‘[]’）

const func(){
return JSON字符串
}

错误：json.parse(func())
正确：

var str=func()
json.parse(str)

4、setState视图不更新

常见是遇到数组的值更新了但是页面没有重新渲染，这时只需要

const [array,setArray]=useState()
setArray([]) //假装这里设置了一个新的数组
const newArr=[...array] 
//使用newArr就可以触发更新了。

我遇到一个少见的问题，图片src的值是通过一个方法获取的后端返回的值，因为这个值本身没有变化，但是这个链接每次请求都返回了不同的值，所以视图没能更新。
解决方法：http的url参数可以随意添加，后端只要不接受这个参数，获取到的内容不会变化，但是这个url的值就有了变化，这样就能触发视图更新了。

5、react项目怎么更新依赖

以antd为例
在项目最外层npm i antd@4.17.0 --save
然后运行yarn install即可

6、useEffect的使用

有参数的时候会根据参数的变化而执行方法

  useEffect(() => {
 
  }, [有参数]);

数组为空的时候只执行一次

 useEffect(() => {
 
  }, [无参数]);

啥也不写就一直执行

 useEffect(() => {
 
  });

7、如何判断对象是不是一个空对象

Object.keys(obj).length == 0
JSON.stringify(obj)==='{}'

8、如何判断数组是数组

Array.isArray(arr)

9、随机数

用floor()写法和parseInt()一样


获取0-9的随机数 parseInt(Math.random() * 10)

获取0-N的随机数 parseInt(Math.random() * N)

获取1-10的随机数 parseInt(Math.random() * 10 + 1)

获取1-N的随机数 parseInt(Math.random() * N + 1)