先學30天React再說之React 小遊戲（Part5）

最新推荐文章于 2023-12-12 13:09:27 发布

那是遇知吧

最新推荐文章于 2023-12-12 13:09:27 发布

阅读量166

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/weixin_41406727/article/details/89455557

版权

React 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

前面學習了關於react的一些知識，這次來總結一下，這些知識的運用。參考了官網的教學，總結如下。

參數說明：

render ：方法的返回值描述了你希望在屏幕上看到的内容，更具体地来说，render 返回了一个 React 元素。
props：一个组件接收一些参数，我们把这些参数叫做 props（“props” 是 “properties” 简写）。
this.state 来初始化 state。this.state 应该被视为一个组件的私有属性。
super方法：在所有含有构造函数的的 React 组件中，构造函数必须以 super(props) 开头。

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而子组件只能通过 props 来传递数据。

栗子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
class Clock extends React.Component {
  render() {
    return (
      <div className="aa">
        <h1>Hello, world!</h1>
        <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}

setInterval(tick, 1000);
</script>

</body>
</html>

結果：

說明：

1：可以看到 <Clock date={new Date()} />輸出后包含在<div id="example"></div>裡面

2：設置一個定時器setInterval(tick, 1000)，把要輸出的內容包含在tick中，這裡不能寫成tick(),這樣是輸出內容了，要調用方法的話就不要加括號喲。

3：Clock是一个 React 组件类，或者说是一个 React 组件类型。一个组件接收一些参数，我们把这些参数叫做 props（“props” 是 “properties” 简写），然后通过 render 方法返回需要展示在屏幕上的视图的层次结构。

簡單的栗子講完了一個 ,再來個網管栗子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
class Button extends React.Component{
constructor(props) {
    super(props);
    this.state = {
      value: this.props.value,
    };
  }
	render(){
		return(
			<button 
			onClick={()=>this.setState({value:'x'})}
			>
			{this.state.value}
	</button>
		)
	}
}
class Aa extends React.Component{
	renderButton(i){
	return	<Button value={i}/>
	}
	render(){
		let bb = '這是個文字'
		return(
		 <div>
			<div>{bb}</div>
			<div>
				{this.renderButton(0)}
				{this.renderButton(1)}
				{this.renderButton(2)}
			</div>
			<div>
				{this.renderButton(3)}
				{this.renderButton(4)}
				{this.renderButton(5)}
			</div>
			<div>
				{this.renderButton(6)}
				{this.renderButton(7)}
				{this.renderButton(8)}
			</div>
			  </div>
		)
	}
}
class Cc extends React.Component{
render(){
	return(
	<div>
		<Aa/>
	</div>
	)
}
}
ReactDOM.render(
<Cc/>,
document.getElementById('example')
)
</script>

</body>
</html>

結果為：

當我點擊0時：0變成了x

在上述栗子中：

在 <button> 标签中，把 this.props.value 替换为 this.state.value。
将 onClick={...} 事件监听函数替换为 onClick={() => this.setState({value: 'X'})}。
为了更好的可读性，将 className 和 onClick 的 prop 分两行书写。

在 Square 组件 render 方法中的 onCLick 事件监听函数中调用 this.setState，我们就可以在每次 <button> 被点击的时候通知 React 去重新渲染 Square 组件。组件更新之后，Square 组件的 this.state.value 的值会变为 'X'，因此，我们在游戏棋盘上就能看见 X 了。点击任意一个方格，X 就会出现了。

每次在组件中调用 setState 时，React 都会自动更新其子组件。