react學習---state的簡寫形式

阿新 • • 發佈：2022-01-02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>state簡寫方式</title>
</head>
<body>
    <!-- 準備好一個“容器” -->
    <div id="test"></div>
    
    <!-- 引入react核心庫 -->
    <script type="text/javascript" src="../js/react.development.js" 
></script>
    <!-- 引入react-dom，用於支援react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用於將jsx轉為js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel" 
>
        //1.建立元件
        class Weather extends React.Component{
            //初始化狀態
            state = {isHot:false,wind:'微風'}

            render(){
                const {isHot,wind} = this.state
                return <h1 onClick={this.changeWeather}>今天天氣很{isHot ? '炎熱' : '涼爽'}，{wind}</h1> 

            }

            //自定義方法————要用賦值語句的形式+箭頭函式
            changeWeather = ()=>{
                const isHot = this.state.isHot
                this.setState({isHot:!isHot})
            }
        }
        //2.渲染元件到頁面
        ReactDOM.render(<Weather/>,document.getElementById('test'))
                
    </script>
</body>
</html>

react學習---state的簡寫形式

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>state簡寫方式</title>

react學習---回撥形式的ref

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>1_字串形式的ref</title>

React學習之JSX與react事件例項分析

本文例項講述了React學習之JSX與react事件。分享給大家供大家參考，具體如下：

React學習之受控元件與資料共享例項分析

本文例項講述了React學習之受控元件與資料共享。分享給大家供大家參考，具體如下：

react學習之基礎環境

環境搭建安裝nodejs node_modules 搜尋路徑 Node將試圖去當前目錄的node_modules資料夾裡搜尋。如果當前目錄的node_modules裡沒有找到，Node會從父目錄的node_modules裡搜尋，這樣遞迴下去直到根目錄。（框架元件

React學習路徑快速進入AntDesignPro開發

　　好久沒有寫部落格，有空再來記一下。最近在整些小東西，需要用到前端，最開始本著對nodejs的動不動幾百兆外掛的恐懼, 於是使用自己以前寫的OSS.Pjax 小框架（類似國外的Pjax，利用pushState達到單頁的效果），表

【React學習筆記】React生命週期梳理（16.X前後兩種）

React生命週期「16版本以前的：」生命週期流程圖元件從生成到被掛在到頁面上的一系列過程

React 【State進階】通過條件判斷優化渲染、使用不可變資料、單一資料來源、狀態提升、使用無狀態元件

目錄： 1. 通過條件判斷優化渲染　　　　　　shouldComponentUpdate 　　　　　　PureComponent（推薦使用）

react學習之元件通訊（props,context）

　　react其元件化的思想使得元件與元件間的通訊變的十分必要，下要我們來分別介紹常見的react元件之間的通訊方式。

React學習進階1

直接看程式碼和註釋 react的事件比較麻煩還有就是弄css的style感覺很繁瑣希望以後的學習讓這個會好一點

react學習筆記——（一）

React構建使用者介面的JavaScript庫，主要用於構建UI介面。特點： 1、宣告式的設計

react學習

1.state屬性 state顧名思義就是狀態，它只是用來控制這個元件本身自己的狀態，我們可以用state來完成對行為的控制、資料的更新、介面的渲染.

React 學習(四) setState

setState[^setState] Asynchronous: In the leftcycles and the composite event of React import React, { Component } from \"react\";

React 學習(十一) Redux

Redux Single Data Source All states is stored in an Object Tree, and the Object Tree is stored in only one store

React學習筆記(四)——列表和key

技術標籤：React 建立列表 React可以使用 JavaScript 的 map() 方法來建立列表，語法如下：

React學習01

技術標籤：reactjs React React是一個用於構建使用者介面的js庫 1、React由來: facebook團隊內部專案，2013年5月份開源

React 學習筆記一 DOM

技術標籤：UIreactjavascriptreactjs 本文需要結合官網學習指南學習編者:由於官方文件翻譯機械,不符合國人思維再此用我們的描述表示一遍降低學習成本

React學習筆記01

React是什麼 React是用於構建使用者介面的JavaScript庫。由FaceBook開發的，能簡單，快速，高效地開發複雜和互動式的Web和移動UI。優點體現在開發效率、維護、組合擴充套件、生態、元件化思想等。現在，React有一個很

react學習——受控元件及非受控元件及ref獲取dom節點

技術標籤：reactreactjs react 建立專案的兩種方式 1.npm 全域性安裝 npm install -g create-react-app

React學習----路由懶載入

技術標籤：前端reactwebpackjavascript React 使用webpack 打包時，會生成一個main.js的檔案。當頁面元件增多時，main.js 也跟著變大，從而減慢頁面的載入速度。使用 compression-webpack-plugin 配合 nginx，將