基础
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)}/>