❤️ - Arrow functions y funciones de primera clase

Arrow functions y funciones de primera clase

화살표 기능은 규정된 기능을 사용하지 않는 형식으로 압축할 수 없습니다.

// funciones normales
function sum(a, b) {
  return a + b;
}

// arrow function
const sum = (a, b) => a + b;

Lo que facilita definir funciones y pasarlas como argumentos en un solo paso

const nums = [1, 2, 3];
const squares = nums.map((n) => n * n);

Para que una arrow function devuelva un objeto debemos ponerlo entre paréntesis

const merge = (obj1, obj2) => ({ ...obj1, ...obj2 });

Cuidado porque podemos crear funciones nuevas cuando no lo deseamos.
En el siguiente ejemplo el componente Screen pasa una nueva función a Button cada vez que Screen se re-renderiza.
Y esto provoca que cada vez que el usuario escribe una letra en Input se re-renderice Button

function Screen() {
  const [value, setValue] = useState("");
  const [loading, setLoading] = useState(false);
  return (
    <div>
      <Input value={value} onChange={setValue} />
      <Button onclick={() => setLoading(true)} /> {/* ⛔️ */}
    </div>
  );
}

후크useCallback 요청에 따라 대응할 수 있습니다.

function Screen() {
  const [value, setValue] = useState("");
  const [loading, setLoading] = useState(false);
  const activateLoading = useCallback(() => setLoading(true), [setLoading]);
  return (
    <div>
      <Input value={value} onChange={setValue} />
      <Button onclick={activateLoading} />
    </div>
  );
}

Además JavaScript는 일급 기능을 제공합니다. Eso significa que las funciones se tratan como una variable, pueden ser pasadas como argumento y devueltas en otras funciones.
이해를 돕는 사람들:

Funciones que devuelven otras funciones (atención a la closure)

const logger = (module) => (msg) => console.log(`${module}: ${msg}`);

const log = logger("BeneficiaryApi");

log("Requested Beneficiaries");
// "BeneficiaryApi: Requested Beneficiaries

log("Beneficiaries request successful");
// "BeneficiaryApi: Beneficiaries request successful

Podemos ahorrarnos crear funciones intermedias

const Wrapper = ({ value, onChange }) => (
  <div>
    <Input value={value} onChange={(val) => onChange(val)} /> {/* ⛔️ */}
  </div>
);

푸에데 세르 에스크리타 코모

const Wrapper = ({ value, onChange }) => (
  <div>
    <Input value={value} onChange={onChange} />
  </div>
);

O mejor incluso, ya que las props son las mismas

const Wrapper = (props) => (
  <div>
    <Input {...props} />
  </div>
);

카레

사용 가능한 폐쇄는 일반적인 기능에 따라 구성되어 있습니다. 예를 들어:

const User = ({userId, name, address}) => (
  const update = (attr, value) => updateUser(userId, attr, value);
  <Input 
    label="Name" 
    value={name} 
    onChange={val => update("name", val)}
  />
  <Input 
    label="Address" 
    value={address} 
    onChange={val => update("address", val)}
  />
)