初探react之井字棋游戏

2020-07-05

一直都是在做vue的项目，对于react的探索搁置了许久，趁着回国在深圳隔离的时间，做了一个有别于react官网的井字棋游戏，总结下来，让自己思路更加清晰。

这是github的地址，https://github.com/wuqin0791/Tic_Tac_Toe

这是效果图

与vue相同的是，react也有自己的cli。

1
2
3

npx create-react-app Tic_Tac_Toe
cd Tic_Tac_Toe
npm start

快速创建脚手架后，拿到项目的第一件事情就是删除多余的代码，构建项目。

引入的包只有两个，一个是react，另一个是react-dom。

1
2
3

ReactDOM.render(<div>
    <Chessboard />
</div>, document.getElementById('root'))

这个是全文的入口，可以看到和vue不一样的是，react的编写风格接近原生js的书写。

ReactDOM.render() 控制传入的容器节点的内容。当第一次调用时，容器内部的任何现有DOM元素都会被替换。之后使用 React 的 DOM diffing 算法来进行有效的更新。

中间的Chessboard是react的组件，定义的形式是函数, 在react里，所有的组件都是以函数的方式写，这样的方式真的很舒服。

支持js的API循环

{cells.map((items, row) => <div className="row">
    {items.map((item, col) => <div className="col">
        <Cell text={item} onClick={() => onClickCell(row, col)} />
    </div>)}
</div>)}

const Cell = function (props) {
    return (
        <div className="cell" onClick={props.onClick}>
            {props.text}
        </div>
    )
}

和vue不同的是，vue自己定义了语法v-for来支持循环，react可以直接用map的方式来做循环。
这里可以看到组件传值和vue相同， text={item}这样的方式，在Cell组件里面，可以通过props来接收

惟一用到的API是useState

1	const [n, setN] = useState(0)

这是惟一用到的API，useState，传入的值是默认值。 return两个值，一个是state的value，另外一个是设置state的function。可以用ES6析构的方式去解析对象。

summary

不需要记过多的API，只需要记住几个简单的语法，例如，{}里面写js，props传参
函数式编程，组件就是一个函数，不需要单独写一个文件，套语法
支持原生JS。例如document.getElementById