class Weather extends React.Component{
	constructor(props) {
	    super(props)
	    // 初始化 state
	    this.state = {
	      isHot: false,
	    }
	}
	// state可以簡(jiǎn)寫(xiě)成如下形式
	// 原因是：類中可以直接寫(xiě)賦值語(yǔ)句，實(shí)際上就是直接給實(shí)例對(duì)象上添加屬性
	state = {
		isHot: false,
	}
	componentDidMount() {
	    // 更改 state
	    this.setState({
	        isHot: !this.state.isHot,
	     })
	  }
	 ...
}

// Wrong，此代碼不會(huì)重新渲染組件
this.state.comment = 'Hello';
// Correct
this.setState({comment: 'Hello'});

	this.setState({
		count: this.state.count +1,
	}, () => {
		console.log(this.state.count)
	})

	this.setState((state, props) => ({
		count: state.count +1,
	}), () => {
		console.log(this.state.count)
	})

constructor(props) {
    super(props);
    // state 包含幾個(gè)獨(dú)立的變量
    this.state = {
      isHot: false,
       wind: '微風(fēng)',
    }
  }
componentDidMount() {
    // 此處調(diào)用 setState() 更新了 isHot 的值，但是 wind 的值也并沒(méi)有丟失，所以說(shuō)明更新的這個(gè)動(dòng)作是合并
    this.setState({
        isHot: !this.state.isHot,
     })
  }

// Wrong
this.setState({
  count: this.state.count + 1,
})
console.log(this.state.counter) //此時(shí)直接讀取獲取到的仍然是舊的 count 值
// Correct
this.setState({
  count: this.state.count + 1,
}， () => {
	console.log(this.state.counter) //此時(shí)讀取獲取到的是新的 count 值
})

// 類組件
class Person extends React.Component{
	render(){
		const {name, age, sex} = this.props
		return (
			<ul>
				<li>姓名：{name}</li>
				<li>性別：{sex}</li>
				<li>年齡：{age+1}</li>
			</ul>
		)
	}
}
// 函數(shù)式組件
function Person(props){
	const {name, age, sex} = props
	return (
		<ul>
			<li>姓名：{name}</li>
			<li>性別：{sex}</li>
			<li>年齡：{age+1}</li>
		</ul>
	)
}
ReactDOM.render(<Person name="jerry" age={19}  sex="男"/>, document.getElementById('test'))
// 批量傳遞 props 的簡(jiǎn)寫(xiě)方法（或者叫批量傳遞標(biāo)簽屬性）：
// 原生 JS 中擴(kuò)展運(yùn)算符是不能展開(kāi)對(duì)象的。
// 由于 React 和 Babel 的原因，擴(kuò)展運(yùn)算符可以展開(kāi)對(duì)象，但僅僅適用于標(biāo)簽屬性的傳遞，別的地方不支持。
ReactDOM.render(<Person {...{
	name: 'jerry',
	age: 19,
	sex: '男'
}} />, document.getElementById('test'))

<Welcome>Hello world!</Welcome>
// 不寫(xiě)標(biāo)簽體，寫(xiě)成 children 標(biāo)簽屬性也可以
<Welcome children='Hello world!'></Welcome>
// 在 Welcome 組件中獲取 props.children，就可以得到字符串 Hello world!
function Welcome(props) {
  return <p>{props.children}</p>;
}

// 給組件加上 defaultProps 的屬性
Person.defaultProps = {
  title: '我是詳情'
}
// 簡(jiǎn)寫(xiě)：簡(jiǎn)寫(xiě)的這種方式只適用于類組件，因?yàn)楹瘮?shù)式組件中是沒(méi)有 static 的
class Person extends React.Component{
	static defaultProps = {
	  title: '我是詳情'
	}
}

// 只要給組件加上 propTypes 屬性，React 就會(huì)認(rèn)為是在加規(guī)則
Person.propTypes = {
  // React.PropTypes 是 React 內(nèi)置的屬性
  title: React.PropTypes.string.isRequired, // 錯(cuò)誤
   // 自 React v15.5 起，React.PropTypes 已移入另一個(gè)包中，需要的話要使用`import PropTypes from 'prop-types'`引入，引入之后全局就會(huì)有了一個(gè)對(duì)象 PropTypes
    title: PropTypes.string.isRequired, // 正確
    speak: PropTypes.func,
}
/// 簡(jiǎn)寫(xiě)：簡(jiǎn)寫(xiě)的這種方式只適用于類組件，因?yàn)楹瘮?shù)式組件中是沒(méi)有 static 的
class Person extends React.Component{
	static propTypes = {
	  title: PropTypes.string.isRequired, 
	}
}

class Demo extends React.Component {
  showData = () => {
     console.log(this) // 打印可以看到組件的實(shí)例對(duì)象上 this 有 refs 屬性，屬性值是 key-value 的對(duì)象 ，其中有一個(gè)key 就是 input1，value 是 ref 當(dāng)前所處的真實(shí)節(jié)點(diǎn)。
	// 訪問(wèn) refs
     alert(this.res.input1.value)
  }
  render() {
    return (
    	<div>
    	    // 創(chuàng)建、綁定 refs
    		<input ref="input1" />
    		<button onClick={this.showData}>點(diǎn)擊</button>
    	</div>
    )
  }
}

class Demo extends React.Component {
  showData = () => {
	// 訪問(wèn) refs
     alert(this.input1.value)
  }
  render() {
    return (
    	<div>
    	    // 創(chuàng)建、綁定 refs
    	    // render 方法執(zhí)行的時(shí)候會(huì)自動(dòng)調(diào)用 ref 的回調(diào)函數(shù)，并且會(huì)把當(dāng)前所處的真實(shí)節(jié)點(diǎn)作為參數(shù)傳遞進(jìn)去，然后將這個(gè)節(jié)點(diǎn)賦值給組件實(shí)例自身的一個(gè)自定義屬性上
    		<input ref={c => this.input1 = c} />    
    		<button onClick={this.showData}>點(diǎn)擊</button>
    	</div>
    )
  }
}

class Demo extends React.Component {
 setInputRef = (c) => {
 	// 綁定 refs
 	this.input1 = c
 }
  showData = () => {
	// 訪問(wèn) refs
     alert(this.input1.value)
  }
  render() {
    return (
    	<div>
    	    // 創(chuàng)建 refs
    	    // 更新時(shí)也不會(huì)重復(fù)觸發(fā) setInputRef，因?yàn)樗呀?jīng)放在實(shí)例自身了
    		<input ref={this.setInputRef} />    
    		<button onClick={this.showData}>點(diǎn)擊</button>
    	</div>
    )
  }
}

class Demo extends React.Component {
   // 創(chuàng)建 refs
  myRef = React.createRef()
  showData = () => {
  	// 訪問(wèn) refs
     alert(this.myRef.current.value)
  }
   render() {
     return (
    	<div>
    	    // 綁定 refs
    	    // 下面一行代碼在執(zhí)行的時(shí)候，React 發(fā)現(xiàn)了 ref 屬性，并且發(fā)現(xiàn)屬性值是用 createRef 創(chuàng)建出來(lái)的一個(gè)容器，這時(shí)， React 會(huì)把當(dāng)前 ref 所在的那個(gè)節(jié)點(diǎn)直接存儲(chǔ)到那個(gè)容器里面
    		<input ref={this.myRef} />    
    		<button onClick={this.showData}>點(diǎn)擊</button>
    	</div>
    )
  }
}

const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));