010.setState的使用

引入

part009經過將原型對象上的changeWeather函數bind了Weather實例，修改this指向並賦值給Weather實例中的changeWeather函數，讓changeWeather事件成功修改了state中isHot的值。然鵝「炎熱」並無變成「涼爽」，這章來解決state修改，頁面即時渲染的問題javascript

ok爲了修改state，咱們複習了類class、this指向、原型鏈、事件綁定，結果state修改，React居然他喵的不買帳，好傢伙讓咱們來看看React自己對狀態改變是怎麼要求的。html

覆盤

React建立組件的經常使用方式是建立類式組件，而且繼承自React.Component類，繼承了state、props等，那麼一樣繼承了React自定義的一些方法，咱們能夠順着原型鏈看看React中經過什麼方法來實現狀態更新。java

好傢伙setState這小東西一聽就像是用來修改狀態啊react

快試試setState

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 準備好容器 -->
    <div id="test"></div>
    <!-- 引入依賴 ,引入的時候，必須就按照這個步驟-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    
    <!--這裏使用了babel用來解析jsx語法-->
    <script type="text/babel"> // 1.建立組件 class Weather extends React.Component{ constructor(props){ super(props) this.state={ isHot:true } this.changeWeather = this.changeWeather.bind(this) } render(){ console.log(this) const {isHot} = this.state return ( <h1 id="span" onClick={this.changeWeather}>今每天氣很{isHot?'炎熱':'涼爽'}</h1> ) } changeWeather(){ console.log(this) const {isHot} = this.state // 注意：狀態state不可直接修改 必須經過setState進行更新 且更新是一種合併非替換 this.setState({isHot:!isHot}) } } // 2.渲染，若是有多個渲染同一個容器，後面的會將前面的覆蓋掉 ReactDOM.render(<Weather/>,document.getElementById('test')) </script>
</body>
</html>
複製代碼

牛啊牛啊babel

state簡寫

長吁一口氣終於解決了然鵝這種寫法總以爲不友好構造器+屬性聲明+this指向一整個的冗餘啊markdown

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    
    <script type="text/babel"> // 1.建立組件 class Weather extends React.Component{ // constructor(props){ // super(props) // this.state={ // isHot:true // } // this.changeWeather = this.changeWeather.bind(this) // } state={ isHot:true } render(){ const {isHot} = this.state return ( <h1 id="span" onClick={this.changeWeather}>今每天氣很{isHot?'炎熱':'涼爽'}</h1> ) } // changeWeather(){ // const {isHot} = this.state // this.setState({isHot:!isHot}) // } // 自定義方法 要用賦值語句的形式+箭頭函數 // 類中能夠直接寫賦值語句 取代寫在構造器裏 // 箭頭函數裏不存在this 會找函數體的外層 可不就是Weather實例 取代bind作this綁定 changeWeather=()=>{ const {isHot} = this.state this.setState({isHot:!isHot}) } } ReactDOM.render(<Weather/>,document.getElementById('test')) </script>
</body>
</html>
複製代碼

賦值語句+箭頭函數取代構造器聲明+this指向+自定義函數，這下構造器就能夠pass了，賦值語句yydsdom

總結

state是組件對象最重要的屬性，值是對象能夠包含多個key-value的組合
組件被稱爲‘狀態機器’，經過更新組件的state來更新對應的頁面顯示（從新渲染組件）
組件中render方法中的this爲組件的實力對象
組件自定義方法中的this值爲undefined，如何解決：
a. 強制綁定this：經過函數對象的bind()
b. 箭頭函數+賦值語句
狀態數據不能直接修改或更新