JSX 基本轮子

编程是一种应用科学，它和理论不一样，比谁背的多，不是比谁理解的多。

C++

轮子

二维数组：

vector<vector<int>> matrix(M, vector<int>(N, 0));

哈希表/字典：

unordered_map<int, int> m;
m[key] = val;
val = m[key];
if (m.count(key) > 0)
if (m.find(key) != m.end())
m.erase(key);
m.size();

集合：

unordered_set<int> s;
s.insert(val);
if (s.count(val) > 0)
s.erase(val);
s.size();

栈：

stack<int> st;
st.push(val);
st.pop();
val = st.top();
if (st.empty())

队列：

queue<int> q;
q.push(val);
q.pop();
val = q.front();
if (q.empty())

堆：

priority_queue<int> pq;
priority_queue<int, vector<int>, greater<int>> min_pq;
priority_queue<int> pq(vec.begin(), vec.end());
pq.push(val);
pq.pop();
val = pq.top();

Python

轮子

二维数组：

matrix = [[0] * N for _ in range(M)]

哈希表/字典：

d = {}
d[key] = val
val = d[key]
if key in d:
del d[key]
len(d)

集合：

s = set()
s.add(val)
if val in s:
s.remove(val)
len(s)

栈：

st = []
st.append(val)
val = st.pop()
val = st[-1]
if not st:

队列：

q = deque()
q.append(val)
val = q.popleft()
val = q[0]
if not q:

堆：

hp = []
heapq.heapify(hp)
heapq.heappush(hp, val)
val = heapq.heappop(hp)
val = hp[0]

JavaScript

轮子

二维数组：

const matrix = Array.from({ length: M }, () => new Array(N).fill(0));

哈希表/字典：

const m = new Map();
m.set(key, val);
val = m.get(key);
if (m.has(key))
m.delete(key);
m.size;

集合：

const s = new Set();
s.add(val);
if (s.has(val))
s.delete(val);
s.size;

栈：

const st = [];
st.push(val);
val = st.pop();
val = st[st.length - 1];
if (st.length === 0)

Map, Reduce, Filter

这些都是针对Array的，如果不是Array要转换成Array。

const patients = [
  { id: 1, name: 'Alice', age: 25, condition: 'Flu', visits: 2 },
  { id: 2, name: 'Bob', age: 65, condition: 'Diabetes', visits: 10 },
  { id: 3, name: 'Charlie', age: 40, condition: 'Flu', visits: 1 },
  { id: 4, name: 'David', age: 72, condition: 'Hypertension', visits: 5 }
];

const patientNames = patients.map(p => p.name);
console.log(patientNames); 

const enrichedPatients = patients.map(p => {
  return {
    ...p,
    isSenior: p.age >= 65
  };
});

const seniors = patients.filter(p => p.age > 60);
console.log(seniors.length);

const fluPatients = patients.filter(p => p.condition === 'Flu');

const totalVisits = patients.reduce((acc, curr) => {
  return acc + curr.visits; 
}, 0); 

console.log(totalVisits);

const patientsByCondition = patients.reduce((acc, curr) => {
  if (!acc[curr.condition]) {
    acc[curr.condition] = [];
  }
  acc[curr.condition].push(curr.name);
  
  return acc;
}, {});

console.log(patientsByCondition);
{
  Flu: ['Alice', 'Charlie'],
  Diabetes: ['Bob'],
  Hypertension: ['David']
}

const seniorNamesUpper = patients
  .filter(p => p.age > 60)
  .map(p => p.name)
  .map(name => name.toUpperCase());

console.log(seniorNamesUpper);

React

前端的核心是“组件化开发”和“虚拟DOM”。

React是纯前端（另一个框架是Vue），需要有HTML，CSS，JavaScript基础。一般在index.html里包含jsx文件。React用的是jsx，即JavaScript XML。浏览器只能读transpiled JSX，也就是转译成的JS。JS的升级版叫TS/TypeScript，JSX对应的是TSX。

React只能有单一根节点。React操纵的是虚拟DOM，计算完才改变真实DOM。

function Car() {
  const power = 218;

  return (
    
      <h1>My Car</h1>
      <p>It has  power * 1.36  horsepower</p>
    
  );

上面的函数（或者叫“React函数组件”）必须在下面的render块中包含才能渲染。

import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('sandy')).render(
  <p>Welcome!</p>
) 

React有两种组件，旧的是Class组件（跳过），新的是Function组件（如上文）。Keys对identify elements很有帮助。

function Car(props) {
  return (
    <>
      <h2>My {props.carinfo.name} {props.carinfo.model}!</h2>
      <p>It is {props.carinfo.color} and it is from {props.carinfo.year}!</p>
    </>
  );
}

const carInfo = {
  name: "Ford",
  model: "Mustang",
  color: "red",
  year: 1969
};

createRoot(document.getElementById('root')).render(
  <Car carinfo={carInfo} />
);

这里的<Car carinfo={carInfo} />相当于给函数组件传参数。

JSX默认会给用户输入渲染成text，所以自带一定程度的防注入。

Hook/钩子是一些特殊的JavaScript函数，如useEffect（做渲染之外的工作）和useState（初始化）：

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    </>
  )
}

createRoot(document.getElementById('root')).render(
  <FavoriteColor />
);

useEffect每一次render都会执行，所以要加[]，否则每次状态发生变化React都会渲染一次：

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  }, []); // <- add empty brackets here

  return <h1>I've rendered {count} times!</h1>;
}

createRoot(document.getElementById('root')).render(
  <Timer />
);