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

// Wrong，此代碼不會重新渲染組件
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 包含幾個獨(dú)立的變量
    this.state = {
      isHot: false,
       wind: '微風(fēng)',
    }
  }
componentDidMount() {
    // 此處調(diào)用 setState() 更新了 isHot 的值，但是 wind 的值也并沒有丟失，所以說明更新的這個動作是合并
    this.setState({
        isHot: !this.state.isHot,
     })
  }

// Wrong
this.setState({
  count: this.state.count + 1,
})
console.log(this.state.counter) //此時直接讀取獲取到的仍然是舊的 count 值
// Correct
this.setState({
  count: this.state.count + 1,
}， () => {
	console.log(this.state.counter) //此時讀取獲取到的是新的 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 的簡寫方法（或者叫批量傳遞標(biāo)簽屬性）：
// 原生 JS 中擴(kuò)展運(yùn)算符是不能展開對象的。
// 由于 React 和 Babel 的原因，擴(kuò)展運(yùn)算符可以展開對象，但僅僅適用于標(biāo)簽屬性的傳遞，別的地方不支持。
ReactDOM.render(<Person {...{
	name: 'jerry',
	age: 19,
	sex: '男'
}} />, document.getElementById('test'))

<Welcome>Hello world!</Welcome>
// 不寫標(biāo)簽體，寫成 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: '我是詳情'
}
// 簡寫：簡寫的這種方式只適用于類組件，因?yàn)楹瘮?shù)式組件中是沒有 static 的
class Person extends React.Component{
	static defaultProps = {
	  title: '我是詳情'
	}
}

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

class Demo extends React.Component {
  showData = () => {
     console.log(this) // 打印可以看到組件的實(shí)例對象上 this 有 refs 屬性，屬性值是 key-value 的對象 ，其中有一個key 就是 input1，value 是 ref 當(dāng)前所處的真實(shí)節(jié)點(diǎ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 = () => {
	// 訪問 refs
     alert(this.input1.value)
  }
  render() {
    return (
    	<div>
    	    // 創(chuàng)建、綁定 refs
    	    // render 方法執(zhí)行的時候會自動調(diào)用 ref 的回調(diào)函數(shù)，并且會把當(dāng)前所處的真實(shí)節(jié)點(diǎn)作為參數(shù)傳遞進(jìn)去，然后將這個節(jié)點(diǎn)賦值給組件實(shí)例自身的一個自定義屬性上
    		<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 = () => {
	// 訪問 refs
     alert(this.input1.value)
  }
  render() {
    return (
    	<div>
    	    // 創(chuàng)建 refs
    	    // 更新時也不會重復(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 = () => {
  	// 訪問 refs
     alert(this.myRef.current.value)
  }
   render() {
     return (
    	<div>
    	    // 綁定 refs
    	    // 下面一行代碼在執(zhí)行的時候，React 發(fā)現(xiàn)了 ref 屬性，并且發(fā)現(xiàn)屬性值是用 createRef 創(chuàng)建出來的一個容器，這時， React 會把當(dāng)前 ref 所在的那個節(jié)點(diǎn)直接存儲到那個容器里面
    		<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>
));