cychien

useLayoutEffect(() => {
  myRef.current.style.top = '100px'
}, []);

cychien

// 阿喔😥 畫面會閃一下
function Demo() {  
  const myRef = React.useRef(null);

  useEffect(() => {
    myRef.current.style.top = '100px'
  }, []);

  return (
    <div style={{position: 'relative'}}>

cychien

// 即使有執行耗時的運算，這樣寫依舊不會拖到新畫面的出現速度
function Demo() {
  useEffect(() => {
    doSomeExpensiveCoputation(param)
  }, [param])

  // return jsx
}

cychien

async function foo() {
  let result = await asyncTask();
  console.log(result);
}

foo();

cychien

function *foo() {
  let result = yield asyncTask();
  console.log(result);
}

runner(foo); // 強大的函式

cychien

function *foo() {
  let result = yield asyncTask();
  console.log(result);
}

const it = foo();
const p = it.next().value;

p.then(
  (data) => {

cychien

function *foo() {
  let y = yield 'Send me a value';
  console.log('y is ', y);
}

const it = foo();
it.next();  // 傳回的物件：{value: 'Send me a value', done: false}
it.next(5); // 印出：y is 5

cychien

function *foo() {
  yield 'half';
  yield 'done';
}

const it = foo();
it.next().value; // 'half'
it.next().value; // 'done'

cychien

new Promise(resolve => {
  resolve(1);
  Promise.resolve()
    .then(() => {
      console.log(2); 
      return 'A';
    })
    .then(data => 
      console.log(data)
    );

cychien

function timeoutPromise(time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('Timeout!')
    }, time);
  });
}

//假設foo會回傳一個promise
Promise.race([