react快速回忆

基础

1、定义子组件、父组件以及变量提升

//因为dom元素是同时jsx来写的，所以一个函数就相当于一个组件
//最后export default出去的就是整体的父组件

//并且在这个父组件（函数）定义的变量由它所有的子组件共享他的状态(值)

function Board() {
}

export default function Game() {   //父组件
  const [xIsNext, setXIsNext] = useState(true);
  const [history, setHistory] = useState([Array(9).fill(null)]);
  const currentSquares = history[history.length - 1];
}

2、子组件触发父组件的方法

主要就是在子组件定义一个prop用于接收父组件定义的参数onSquareClick，然后这个函数要执行什么东西就子组件自行发挥了

//子组件
function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

//父组件
export default function Board() {
  const [squares, setSquares] = useState(Array(9).fill(null));

  return (
    <>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={handleClick} />
        //...
  );
}

Redux

//

易错点

1、当prop为一个函数的时候，带 “()” 和不带 "()"的区别

//这样写handleClick 函数作为 props 向下传递,不会立即调用
<Square value={squares[0]} onSquareClick={handleClick} />

//这样就会导致立即调用了函数
<Square value={squares[0]} onSquareClick={handleClick(0)} />

但是又想传一个函数的时候带参数，解决方法：使用箭头函数来多套一层再执行目标函数
=====>
<Square value={squares[0]} onSquareClick={() => handleClick(0)}/>
<Square value={squares[1]} onSquareClick={() => handleClick(1)}/>