react笔记01
//在Board组件中的renderSqueare方法中，我们将代码改写成下面这样，传递一个名为value的prop到Square中：
class Board extends React.Component {
renderSquare(i) {
return <Square value={i} />
}
}
//修改Squeare组件中的render方法，把{/*TODO*/}替换为
//{this.props.value}，以显示上文中传入的值：
class Square extends React.Component {
render() {
return(
<button className="square">
{this.props.value}
</button>
)
}
}
//刚刚的操作就是把一个prop从父组件Board“传递”给了子组件Square。在React应用中，数据通过props的传递从父组件流向子组件
接下来我们把Square组件中render()方法的返回值中的button标签修改为如下内容：
class Square extends React.Component {
render() {
<button className="square" onClick={function() {console.log('click');}}>
{this.props.value}
</button>
}
}
//如果此刻点击某个格子，将在浏览器的开发者工具中打印'click'
注意
为了少输入代码，同时为了避免this造成的困扰，我们将在这里使用箭头函数来进行事件处理
class Square extends React.Component {
render() {
renturn {
<button className="square" onClick={() => {
console.log('click');}}>
{this.props.value}
</button>
}
}
}
//每个React组件都必须有一个render()。它返回一个React元素，它是原生DOM组件的表示方式。如果需要渲染多个HTML元素，则必须将它们组合在一个封闭标签中，例如<form>,<div>等。此函数必须保持纯洁，即每次调用时必须返回相同的结果。
- render()：是class组件中唯一必须实现的方法
- 当render被调用时，会检查this.props和this.state的变化并返回以下类型之一：
（1）React元素。通常通过JSX创建。例如：<div/>会被React渲染为DOM节点，<MyComponent />会被React渲染为自定义组件，无论是<div/>还是<MyComponent />均为React元素。
（2）数组或fragments。使得render方法可以返回多个元素。
（3）Portals。可以渲染子节点到不同的DOM子树中。
（4）字符串或数值类型。他们在DOM中会被渲染为文本节点。
（5）布尔类型或null，什么都不渲染。（主要用于支持返回test &&<Child/> 的模式，其中test为布尔类型）
3. render()应该为纯函数，这意味着在不修改组件state的情况下，每次调用都返回相同的结果，并且它不会直接与浏览器交互。
4.如需与浏览器进行交互，请在componentDidMount()或其他生命周期方法中执行你的操作。保持render()为纯函数，可以使组件更容易使用、维护。
5. 在React.Comoponent类的子类会重新定义（实现）
注意：此处使用了onClick={()=> {console.log('click')}}的方式向onClick这个prop传入一个函数。
React将在单击时调用此函数。
但很多人经常忘记编写()=>,而写成了onClick={console.log('click')},这种常见的错误会导致每次这个组件渲染的时候都会触发控制台输出。
接下来，我们希望Square组件可以“记住”他被点击过，然后用"X"来填充对应的方格。我们用state来实现所谓"记忆"的功能.
可以通过在React组件的构造函数中设置this.state来初始化state。this.state应该被视为一个组件的私有属性。我们在this.state中存储当前每个方格(Square)的值，并且在每次方格被点击的时候改变这个值。
首先，我们向这个class中添加一个构造函数，用来初始化state：
class Square extends React.Component {
constructor(props) {
super(props);
this.state = {
value:null,
};
}
render() {
renturn (
<button className="square" onClick={() => console.log('click')}>
{this.props.value}
</button>
)
}
}
//此时constructor的作用：
//1.初始化this.state
//2.纠正方法的this的指向，若使用箭头函数将不需要将事件在constructor中改变this指向
//super( ) ——继承 在class方法中，继承是使用 extends 关键字来实现的。子类 必须 在 constructor( )调用 super( )方法，否则新建实例时会报错。报错的原因是：子类是没有自己的 this 对象的，它只能继承自父类的 this 对象，然后对其进行加工，而super( )就是将父类中的this对象继承给子类的。没有 super，子类就得不到 this 对象。
