Question

有人可以解释这些语法之间的区别吗？

function defineSchema(){

}

const defineSchema = () => {

}

const defineSchema = useCallback(() =>

})

那我什么时候应该使用一个？

关于此问题的后续问题是，当我尝试更改此变量时会如何

var schema = new passwordValidator();

我只能在函数外部更改其值

并且在函数内部时，更改不会生效

例如

schema
  .is().min(8)                                    
  .is().max(20)                                   
  .has().symbols()                                
  .has().digits()                                 
  .has().not().spaces()                           
  .is().not().oneOf(simplePass);

上面的代码有效，而下面的代码无效。

function defineSchema(passParamState){
schema
        .is().min(5)                                    
        .is().max(9)                                   
        .has().symbols()                                
        .has().digits()                                 
        .has().not().spaces()                           
        .is().not().oneOf(simplePass); 
}

Answer 1

function defineSchema(){

}

这通常是在JS中定义函数的方式。此函数还将有自己的this。因此，当您想要使用上下文，即this时，请使用此定义方法。

const defineSchema = () => {

}

这是在JS中定义函数的另一种方法。这被称为箭头功能，它们是在ES6中引入的。他们没有自己的this。如果您希望函数从父范围继承this，则可以使用这种方法定义函数。

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b], //dependencies.
);

useCallback是一个钩子，它将返回一个已记忆的回调版本，仅在其中一个依赖项已更改时才会更改。

来自react docs：

当将回调传递给依赖于引用相等性的优化子组件以防止不必要的渲染（例如，shouldComponentUpdate）时，这很有用。

因此，如果您在doSomething函数中进行了一些昂贵的计算，那么您将需要使用useCallback。

Answer 2

@Utsav Patel的回答解释了大多数差异。但是这些声明还有另一个区别。使用function（也称为函数声明）声明的任何函数都托管在代码的顶部。

例如，以下代码将值test打印到控制台：

f('test');
function f(value) { console.log(value); }

，而以下两个示例将抛出ReferenceError。

f('test'); // f has not been declared yet
const f = function(value) { console.log(value); }

或

f('test'); // f has not been declared yet
const f = value => { console.log(value); }

React.js：这些功能之间的区别

2 个答案: