聊聊 React-有解無憂

都說 React 開發效率高，但效率高在哪呢？來細看看，

用 d3 寫一個 List：

const renderList = data =https://www.cnblogs.com/apolis/p/> {
  d3.select("ul")
    .selectAll("li")
    .data(data, d => d.id)
    .join(
      enter => enter.append("li").text(d => d.text),
      update => update.text(d => d.text),
      exit => exit.remove()
    );
};

d3 把 view 和 data 的關系分為 3 種：

enter：有 data 沒 view
update：有 data 有 view
exit：有 view 沒 data

資料更新，開發者需考慮「新 view」對比「老 view」，新增的「enter」、更新的「update」、減少的「exit」要怎么處理，

用 React 來寫：

const List = ({ data }) => {
  return (
    <ul>
      {data.map(d => (
        <li key={d.id}>{d.text}</li>
      ))}
    </ul>
  );
};

資料更新，開發者只需考慮「新 view」是什么樣，不用考慮怎么把「老 view」變成「新 view」，比 d3 簡單，

React 是不是比 d3 好用？

答：不一定，要看場景，React 框架把「新增的、更新的、減少的處理」都做了，開發者沒法干預，但如果你想做一些影片，需要精細控制「新增的、更新的、減少的」，React 就不如 d3 好用了，

再看 React 代碼：

const List = ({ data }) => {
  return (
    <ul>
      {data.map(d => (
        <li key={d.id}>{d.text}</li>
      ))}
    </ul>
  );
};

React 把組件簡化成了一個函式，data -> view，組件就是函式，意味著函式可以怎么玩，組件就可以怎么玩，

函式內呼叫別的函式

function a() {}
function b() {}

function c() {
  a();
  b();
}

function A() {}
function B() {}

function C() {
  return (
    <div>
      <A />
      <B />
    </div>
  );
}

函式的回傳值作為別的函式的傳參

function a() {}
function b(arg) {}

function c() {
  b(a());
}

function A() {}
function B({ children }) {
  return <div>{children}</div>;
}

function C() {
  return (
    <B>
      <A />
    </B>
  );
}

高階函式

function memoize(fn) {
  const cache = {};
  return arg => {
    if (cache[arg]) return cache[arg];
    else {
      const result = fn(arg);
      cache[arg] = result;
      return result;
    }
  };
}

const memoizedSqrt = memoize(Math.sqrt);

const A = () => {};
const wrapper = Cmp => {};
const WrappedA = wrapper(A);

Continuation，或者叫 Callback，Callback 的特點是：等時機成熟后才執行，

const handler = () => {};
button.addEventListener("click", handler);

// Context Consumer
<ThemeContext.Consumer>
  {theme => <Cmp theme={theme} />}
</ThemeContext.Consumer>

// Render Props
const MouseTracker = Cmp => {
  return (
    <Mouse
      render={mouse => <Cmp mouse={mouse} />}
    />
  );
};

遞回

const factorial = n => {
  if (n === 1) return 1;
  else return n * factorial(n - 1);
};

const Tree = ({ data }) => (
  <ul>
    {data.map(d => (
      <li key={d.id}>
        {d.text}
        {d.children && <Tree data=https://www.cnblogs.com/apolis/p/{d.children} />}

))}

);

React 組件的種種用法，本質都是函式的用法，從函式的角度來理解、運用 React，就不會覺得這個框架很神秘了，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/251560.html

標籤：JavaScript

上一篇：Electron實用技巧-開機啟動時隱藏主視窗，只顯示系統托盤

下一篇：es6-ES6 的變數宣告