国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React入門(mén)看這篇就夠了

luckyw / 2621人閱讀

摘要:背景介紹入門(mén)實(shí)例教程起源于的內(nèi)部項(xiàng)目,因?yàn)樵摴緦?duì)市場(chǎng)上所有框架,都不滿意,就決定自己寫(xiě)一套,用來(lái)架設(shè)的網(wǎng)站。做出來(lái)以后,發(fā)現(xiàn)這套東西很好用,就在年月開(kāi)源了。也就是說(shuō),通過(guò)鉤子函

react - JSX React 背景介紹

React 入門(mén)實(shí)例教程

React 起源于 Facebook 的內(nèi)部項(xiàng)目,因?yàn)樵摴緦?duì)市場(chǎng)上所有 JavaScript MVC 框架,都不滿意,就決定自己寫(xiě)一套,用來(lái)架設(shè) Instagram 的網(wǎng)站。做出來(lái)以后,發(fā)現(xiàn)這套東西很好用,就在2013年5月開(kāi)源了。

什么是React

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

用來(lái)構(gòu)建UI的 JavaScript庫(kù)

React 不是一個(gè) MVC 框架,僅僅是視圖(V)層的庫(kù)

React 官網(wǎng)

React 中文文檔

特點(diǎn)

1 使用 JSX語(yǔ)法 創(chuàng)建組件,實(shí)現(xiàn)組件化開(kāi)發(fā),為函數(shù)式的 UI 編程方式打開(kāi)了大門(mén)

2 性能高的讓人稱贊:通過(guò) diff算法虛擬DOM 實(shí)現(xiàn)視圖的高效更新

3 HTML僅僅是個(gè)開(kāi)始

> JSX --TO--> EveryThing

- JSX --> HTML
- JSX --> native ios或android中的組件(XML)
- JSX --> VR
- JSX --> 物聯(lián)網(wǎng)
為什么要用React

1 使用組件化開(kāi)發(fā)方式,符合現(xiàn)代Web開(kāi)發(fā)的趨勢(shì)

2 技術(shù)成熟,社區(qū)完善,配件齊全,適用于大型Web項(xiàng)目(生態(tài)系統(tǒng)健全)

3 由Facebook專門(mén)的團(tuán)隊(duì)維護(hù),技術(shù)支持可靠

4 ReactNative - Learn once, write anywhere: Build mobile apps with React

5 使用方式簡(jiǎn)單,性能非常高,支持服務(wù)端渲染

6 React非常火,從技術(shù)角度,可以滿足好奇心,提高技術(shù)水平;從職業(yè)角度,有利于求職和晉升,有利于參與潛力大的項(xiàng)目

React中的核心概念

1 虛擬DOM(Virtual DOM)

2 Diff算法(虛擬DOM的加速器,提升React性能的法寶)

虛擬DOM(Vitural DOM)
React將DOM抽象為虛擬DOM,虛擬DOM其實(shí)就是用一個(gè)對(duì)象來(lái)描述DOM,通過(guò)對(duì)比前后兩個(gè)對(duì)象的差異,最終只把變化的部分重新渲染,提高渲染的效率

為什么用虛擬dom,當(dāng)dom反生更改時(shí)需要遍歷 而原生dom可遍歷屬性多大231個(gè) 且大部分與渲染無(wú)關(guān) 更新頁(yè)面代價(jià)太大

如何實(shí)現(xiàn)一個(gè) Virtual DOM 算法

理解 Virtual DOM

VituralDOM的處理方式

1 用 JavaScript 對(duì)象結(jié)構(gòu)表示 DOM 樹(shù)的結(jié)構(gòu),然后用這個(gè)樹(shù)構(gòu)建一個(gè)真正的 DOM 樹(shù),插到文檔當(dāng)中

2 當(dāng)狀態(tài)變更的時(shí)候,重新構(gòu)造一棵新的對(duì)象樹(shù)。然后用新的樹(shù)和舊的樹(shù)進(jìn)行比較,記錄兩棵樹(shù)差異

3 把2所記錄的差異應(yīng)用到步驟1所構(gòu)建的真正的DOM樹(shù)上,視圖就更新了

Diff算法

Reconciliation diff

diff算法 - 中文文檔

不可思議的 react diff

React diff 算法

當(dāng)你使用React的時(shí)候,在某個(gè)時(shí)間點(diǎn) render() 函數(shù)創(chuàng)建了一棵React元素樹(shù),
在下一個(gè)state或者props更新的時(shí)候,render() 函數(shù)將創(chuàng)建一棵新的React元素樹(shù),
React將對(duì)比這兩棵樹(shù)的不同之處,計(jì)算出如何高效的更新UI(只更新變化的地方)

React中有兩種假定:

1 兩個(gè)不同類型的元素會(huì)產(chǎn)生不同的樹(shù)(根元素不同結(jié)構(gòu)樹(shù)一定不同)

2 開(kāi)發(fā)者可以通過(guò)key屬性指定不同樹(shù)中沒(méi)有發(fā)生改變的子元素

Diff算法的說(shuō)明 - 1

如果兩棵樹(shù)的根元素類型不同,React會(huì)銷(xiāo)毀舊樹(shù),創(chuàng)建新樹(shù)

// 舊樹(shù)
// 新樹(shù) 執(zhí)行過(guò)程:destory Counter -> insert Counter
Diff算法的說(shuō)明 - 2

對(duì)于類型相同的React DOM 元素,React會(huì)對(duì)比兩者的屬性是否相同,只更新不同的屬性

當(dāng)處理完這個(gè)DOM節(jié)點(diǎn),React就會(huì)遞歸處理子節(jié)點(diǎn)。

// 舊
// 新
只更新:className 屬性 // 舊
// 新
只更新:color屬性
Diff算法的說(shuō)明 - 3

1 當(dāng)在子節(jié)點(diǎn)的后面添加一個(gè)節(jié)點(diǎn),這時(shí)候兩棵樹(shù)的轉(zhuǎn)化工作執(zhí)行的很好

// 舊
  • first
  • second
// 新
  • first
  • second
  • third
執(zhí)行過(guò)程: React會(huì)匹配新舊兩個(gè)
  • first
  • ,匹配兩個(gè)
  • second
  • ,然后添加
  • third
  • tree

    2 但是如果你在開(kāi)始位置插入一個(gè)元素,那么問(wèn)題就來(lái)了:

    // 舊
    
    • Duke
    • Villanova
    // 新
    • Connecticut
    • Duke
    • Villanova
    在沒(méi)有key屬性時(shí)執(zhí)行過(guò)程: React將改變每一個(gè)子刪除重新創(chuàng)建,而非保持
  • Duke
  • Villanova
  • 不變
    key 屬性
    為了解決以上問(wèn)題,React提供了一個(gè) key 屬性。當(dāng)子節(jié)點(diǎn)帶有key屬性,React會(huì)通過(guò)key來(lái)匹配原始樹(shù)和后來(lái)的樹(shù)。
    // 舊
    
    • Duke
    • Villanova
    // 新
    • Connecticut
    • Duke
    • Villanova
    執(zhí)行過(guò)程: 現(xiàn)在 React 知道帶有key "2014" 的元素是新的,對(duì)于 "2015" 和 "2016" 僅僅移動(dòng)位置即可

    說(shuō)明:key屬性在React內(nèi)部使用,但不會(huì)傳遞給你的組件

    推薦:在遍歷數(shù)據(jù)時(shí),推薦在組件中使用 key 屬性:

  • {item.name}
  • 注意:key只需要保持與他的兄弟節(jié)點(diǎn)唯一即可,不需要全局唯一

    注意:盡可能的減少數(shù)組index作為key,數(shù)組中插入元素的等操作時(shí),會(huì)使得效率底下

    React的基本使用

    安裝:npm i -S react react-dom

    react:react 是React庫(kù)的入口點(diǎn)

    react-dom:提供了針對(duì)DOM的方法,比如:把創(chuàng)建的虛擬DOM,渲染到頁(yè)面上

    // 1. 導(dǎo)入 react
    import React from "react"
    import ReactDOM from "react-dom"
    
    // 2. 創(chuàng)建 虛擬DOM
    // 參數(shù)1:元素名稱  參數(shù)2:元素屬性對(duì)象(null表示無(wú))  參數(shù)3:當(dāng)前元素的子元素string||createElement() 的返回值
    const divVD = React.createElement("div", {
      title: "hello react"
    }, "Hello React?。。?)
    
    // 3. 渲染
    // 參數(shù)1:虛擬dom對(duì)象  參數(shù)2:dom對(duì)象表示渲染到哪個(gè)元素內(nèi) 參數(shù)3:回調(diào)函數(shù)
    ReactDOM.render(divVD, document.getElementById("app"))
    createElement()的問(wèn)題

    說(shuō)明:createElement()方式,代碼編寫(xiě)不友好,太復(fù)雜

    var dv = React.createElement(
      "div",
      { className: "shopping-list" },
      React.createElement(
        "h1",
        null,
        "Shopping List for "
      ),
      React.createElement(
        "ul",
        null,
        React.createElement(
          "li",
          null,
          "Instagram"
        ),
        React.createElement(
          "li",
          null,
          "WhatsApp"
        )
      )
    )
    // 渲染
    ReactDOM.render(dv, document.getElementById("app"))
    JSX 的基本使用

    注意:JSX語(yǔ)法,最終會(huì)被編譯為 createElement() 方法

    推薦:使用 JSX 的方式創(chuàng)建組件

    JSX - JavaScript XML

    安裝:npm i -D babel-preset-react (依賴與:babel-core/babel-loader)

    注意:JSX的語(yǔ)法需要通過(guò) babel-preset-react 編譯后,才能被解析執(zhí)行
    /* 1 在 .babelrc 開(kāi)啟babel對(duì) JSX 的轉(zhuǎn)換 */
    {
      "presets": [
        "env", "react"
      ]
    }
    
    /* 2 webpack.config.js */
    module: [
      rules: [
        { test: /.js$/, use: "babel-loader", exclude: /node_modules/ },
      ]
    ]
    
    /* 3 在 js 文件中 使用 JSX */
    const dv = (
      
    Hello JSX!
    ) /* 4 渲染 JSX 到頁(yè)面中 */ ReactDOM.render(dv, document.getElementById("app"))
    JSX的注意點(diǎn)

    注意 1: 如果在 JSX 中給元素添加類, 需要使用 className 代替 class

    類似:label 的 for屬性,使用htmlFor代替

    注意 2:在 JSX 中可以直接使用 JS代碼,直接在 JSX 中通過(guò) {} 中間寫(xiě) JS代碼即可

    注意 3:在 JSX 中只能使用表達(dá)式,但是不能出現(xiàn) 語(yǔ)句?。。?/p>

    注意 4:在 JSX 中注釋語(yǔ)法:{/* 中間是注釋的內(nèi)容 */}

    React組件
    React 組件可以讓你把UI分割為獨(dú)立、可復(fù)用的片段,并將每一片段視為相互獨(dú)立的部分。

    組件是由一個(gè)個(gè)的HTML元素組成的

    概念上來(lái)講, 組件就像JS中的函數(shù)。它們接受用戶輸入(props),并且返回一個(gè)React對(duì)象,用來(lái)描述展示在頁(yè)面中的內(nèi)容

    React創(chuàng)建組件的兩種方式

    1 通過(guò) JS函數(shù) 創(chuàng)建(無(wú)狀態(tài)組件)

    2 通過(guò) class 創(chuàng)建(有狀態(tài)組件)

    函數(shù)式組件 和 class 組件的使用場(chǎng)景說(shuō)明:
    1 如果一個(gè)組件僅僅是為了展示數(shù)據(jù),那么此時(shí)就可以使用 函數(shù)組件
    2 如果一個(gè)組件中有一定業(yè)務(wù)邏輯,需要操作數(shù)據(jù),那么就需要使用 class 創(chuàng)建組件,因?yàn)?,此時(shí)需要使用 state
    JavaScript函數(shù)創(chuàng)建

    注意:1 函數(shù)名稱必須為大寫(xiě)字母開(kāi)頭,React通過(guò)這個(gè)特點(diǎn)來(lái)判斷是不是一個(gè)組件

    注意:2 函數(shù)必須有返回值,返回值可以是:JSX對(duì)象或null

    注意:3 返回的JSX,必須有一個(gè)根元素

    注意:4 組件的返回值使用()包裹,避免換行問(wèn)題

    function Welcome(props) {
      return (
        // 此處注釋的寫(xiě)法 
        
    {/* 此處 注釋的寫(xiě)法 必須要{}包裹 */}

    Shopping List for {props.name}

    • Instagram
    • WhatsApp
    ) } ReactDOM.render( , document.getElementById("app") )
    class創(chuàng)建
    在es6中class僅僅是一個(gè)語(yǔ)法糖,不是真正的類,本質(zhì)上還是構(gòu)造函數(shù)+原型 實(shí)現(xiàn)繼承
    // ES6中class關(guān)鍵字的簡(jiǎn)單使用
    
    // - **ES6中的所有的代碼都是運(yùn)行在嚴(yán)格模式中的**
    // - 1 它是用來(lái)定義類的,是ES6中實(shí)現(xiàn)面向?qū)ο缶幊痰男路绞?// - 2 使用`static`關(guān)鍵字定義靜態(tài)屬性
    // - 3 使用`constructor`構(gòu)造函數(shù),創(chuàng)建實(shí)例屬性
    // - [參考](http://es6.ruanyifeng.com/#docs/class)
    
    // 語(yǔ)法:
    class Person {
      // 實(shí)例的構(gòu)造函數(shù) constructor
      constructor(age){
        // 實(shí)例屬性
        this.age = age
      }
      // 在class中定義方法 此處為實(shí)例方法 通過(guò)實(shí)例打點(diǎn)調(diào)用
      sayHello () {
        console.log("大家好,我今年" + this.age + "了");
      }
    
      // 靜態(tài)方法 通過(guò)構(gòu)造函數(shù)打點(diǎn)調(diào)用 Person.doudou()
      static doudou () {
        console.log("我是小明,我新get了一個(gè)技能,會(huì)暖床");
      }
    }
    // 添加靜態(tài)屬性
    Person.staticName = "靜態(tài)屬性"
    // 實(shí)例化對(duì)象
    const p = new Person(19)
     
     
    // 實(shí)現(xiàn)繼承的方式
     
    class American extends Person {
      constructor() {
        // 必須調(diào)用super(), super表示父類的構(gòu)造函數(shù)
        super()
        this.skin = "white"
        this.eyeColor = "white"
      }
    }
    
    // 創(chuàng)建react對(duì)象
    // 注意:基于 `ES6` 中的class,需要配合 `babel` 將代碼轉(zhuǎn)化為瀏覽器識(shí)別的ES5語(yǔ)法
    // 安裝:`npm i -D babel-preset-env`
     
    //  react對(duì)象繼承字React.Component
    class ShoppingList extends React.Component {
      constructor(props) { 
        super(props)
      }
      // class創(chuàng)建的組件中 必須有rander方法 且顯示return一個(gè)react對(duì)象或者null
      render() {
        return (
          

    Shopping List for {this.props.name}

    • Instagram
    • WhatsApp
    ) } }
    給組件傳遞數(shù)據(jù) - 父子組件傳遞數(shù)據(jù)

    組件中有一個(gè) 只讀的對(duì)象 叫做 props,無(wú)法給props添加屬性

    獲取方式:函數(shù)參數(shù) props

    作用:將傳遞給組件的屬性轉(zhuǎn)化為 props 對(duì)象中的屬性

    function Welcome(props){
      // props ---> { username: "zs", age: 20 }
      return (
        
    Welcome React

    姓名:{props.username}----年齡是:{props.age}

    ) } // 給 Hello組件 傳遞 props:username 和 age(如果你想要傳遞numb類型是數(shù)據(jù) 就需要向下面這樣) ReactDOM.reander(, ......)
    封裝組件到獨(dú)立的文件中
    // 創(chuàng)建Hello2.js組件文件
    // 1. 引入React模塊
    // 由于 JSX 編譯后會(huì)調(diào)用 React.createElement 方法,所以在你的 JSX 代碼中必須首先拿到React。
    import React from "react"
    
    // 2. 使用function構(gòu)造函數(shù)創(chuàng)建組件
    function Hello2(props){
      return (
        
    這是Hello2組件

    這是大大的H1標(biāo)簽,我大,我驕傲?。?!

    這是小小的h6標(biāo)簽,我小,我傲嬌?。?!
    ) } // 3. 導(dǎo)出組件 export default Hello2 // app.js中 使用組件: import Hello2 from "./components/Hello2"
    props和state props

    作用:給組件傳遞數(shù)據(jù),一般用在父子組件之間

    說(shuō)明:React把傳遞給組件的屬性轉(zhuǎn)化為一個(gè)對(duì)象并交給 props

    特點(diǎn):props是只讀的,無(wú)法給props添加或修改屬性

    props.children:獲取組件的內(nèi)容,比如:

    組件內(nèi)容 中的 組件內(nèi)容

    // props 是一個(gè)包含數(shù)據(jù)的對(duì)象參數(shù),不要試圖修改 props 參數(shù)
    // 返回值:react元素
    function Welcome(props) {
      // 返回的 react元素中必須只有一個(gè)根元素
      return 
    hello, {props.name}
    } class Welcome extends React.Component { constructor(props) { super(props) } render() { return

    Hello, {this.props.name}

    } }
    state
    狀態(tài)即數(shù)據(jù)

    作用:用來(lái)給組件提供組件內(nèi)部使用的數(shù)據(jù)

    注意:只有通過(guò)class創(chuàng)建的組件才具有狀態(tài)

    注意:狀態(tài)是私有的,完全由組件來(lái)控制

    注意:不要在 state 中添加 render() 方法中不需要的數(shù)據(jù),會(huì)影響渲染性能!

    可以將組件內(nèi)部使用但是不渲染在視圖中的內(nèi)容,直接添加給 this

    注意:不要在 render() 方法中調(diào)用 setState() 方法來(lái)修改state的值

    但是可以通過(guò) this.state.name = "rose" 方式設(shè)置state(不推薦!!!!)

    // 例:
    class Hello extends React.Component {
      constructor() {
        // es6繼承必須用super調(diào)用父類的constructor
        super()
    
        this.state = {
          gender: "male"
        }
      }
    
      render() {
        return (
          
    性別:{ this.state.gender }
    ) } }
    JSX語(yǔ)法轉(zhuǎn)化過(guò)程
    // 1、JSX
    const element = (
      

    Hello, world!

    ) // 2、JSX -> createElement const element = React.createElement( "h1", {className: "greeting"}, "Hello, world!" ) // React elements: 使用對(duì)象的形式描述頁(yè)面結(jié)構(gòu) // Note: 這是簡(jiǎn)化后的對(duì)象結(jié)構(gòu) const element = { type: "h1", props: { className: "greeting", }, children: ["Hello, world"] }
    評(píng)論列表案例

    鞏固有狀態(tài)組件和無(wú)狀態(tài)組件的使用

    兩個(gè)組件:

    [
      { user: "張三", content: "哈哈,沙發(fā)" },
      { user: "張三2", content: "哈哈,板凳" },
      { user: "張三3", content: "哈哈,涼席" },
      { user: "張三4", content: "哈哈,磚頭" },
      { user: "張三5", content: "哈哈,樓下山炮" }
    ]
    
    // 屬性擴(kuò)展
    
    style樣式
    // 1. 直接寫(xiě)行內(nèi)樣式:
    
  • // 2. 抽離為對(duì)象形式 var styleH3 = {color:"blue"} var styleObj = { liStyle:{border:"1px solid red", fontSize:"12px"}, h3Style:{color:"green"} }
  • 評(píng)論內(nèi)容:{props.content}

  • // 3. 使用樣式表定義樣式: import "../css/comment.css"

    評(píng)論人:{props.user}

    相關(guān)文章

    React數(shù)據(jù)流和組件間的溝通總結(jié)

    單向數(shù)據(jù)流和雙向綁定各有什么優(yōu)缺點(diǎn)?

    怎么更好的理解虛擬DOM?

    React中文文檔

    React 源碼剖析系列 - 不可思議的 react diff

    深入淺出React(四):虛擬DOM Diff算法解析

    組件的生命周期

    簡(jiǎn)單說(shuō):一個(gè)組件從開(kāi)始到最后消亡所經(jīng)歷的各種狀態(tài),就是一個(gè)組件的生命周期

    組件生命周期函數(shù)的定義:從組件被創(chuàng)建,到組件掛載到頁(yè)面上運(yùn)行,再到頁(yè)面關(guān)閉組件被卸載,這三個(gè)階段總是伴隨著組件各種各樣的事件,那么這些事件,統(tǒng)稱為組件的生命周期函數(shù)!

    通過(guò)這個(gè)函數(shù),能夠讓開(kāi)發(fā)人員的代碼,參與到組件的生命周期中。也就是說(shuō),通過(guò)鉤子函數(shù),就可以控制組件的行為

    react component

    React Native 中組件的生命周期

    React 生命周期的管理藝術(shù)

    智能組件和木偶組件

    組件生命周期函數(shù)總覽

    組件的生命周期包含三個(gè)階段:創(chuàng)建階段(Mounting)、運(yùn)行和交互階段(Updating)、卸載階段(Unmounting)

    Mounting:

    constructor()  
    componentWillMount()
    render()
    componentDidMount()

    Updating

    componentWillReceiveProps()  
    shouldComponentUpdate()
    componentWillUpdate()
    render()
    componentDidUpdate()

    Unmounting

    componentWillUnmount()
    組件生命周期 - 創(chuàng)建階段(Mounting)

    特點(diǎn):該階段的函數(shù)只執(zhí)行一次

    constructor()

    作用:1 獲取props 2 初始化state

    說(shuō)明:通過(guò) constructor() 的參數(shù)props獲取

    設(shè)置state和props

    class Greeting extends React.Component {
      constructor(props) {
        // 獲取 props
        super(props)
        // 初始化 state
        this.state = {
          count: props.initCount
        }
      }
    }
    
    // 初始化 props
    // 語(yǔ)法:通過(guò)靜態(tài)屬性 defaultProps 來(lái)初始化props
    Greeting.defaultProps = {
      initCount: 0
    };
    componentWillMount()

    說(shuō)明:組件被掛載到頁(yè)面之前調(diào)用,其在render()之前被調(diào)用,因此在這方法里同步地設(shè)置狀態(tài)將不會(huì)觸發(fā)重渲染

    注意:無(wú)法獲取頁(yè)面中的DOM對(duì)象

    注意:可以調(diào)用 setState() 方法來(lái)改變狀態(tài)值

    用途:發(fā)送ajax請(qǐng)求獲取數(shù)據(jù)

    componentWillMount() {
      console.warn(document.getElementById("btn")) // null
      this.setState({
        count: this.state.count + 1
      })
    }
    render()

    作用:渲染組件到頁(yè)面中,無(wú)法獲取頁(yè)面中的DOM對(duì)象

    注意:不要在render方法中調(diào)用 setState() 方法,否則會(huì)遞歸渲染

    原因說(shuō)明:狀態(tài)改變會(huì)重新調(diào)用render(),render()又重新改變狀態(tài)

    render() {
      console.warn(document.getElementById("btn")) // null
    
      return (
        
    { this.state.count === 4 ? null : }
    ) }
    componentDidMount()

    1 組件已經(jīng)掛載到頁(yè)面中

    2 可以進(jìn)行DOM操作,比如:獲取到組件內(nèi)部的DOM對(duì)象

    3 可以發(fā)送請(qǐng)求獲取數(shù)據(jù)

    4 可以通過(guò) setState() 修改狀態(tài)的值

    注意:在這里修改狀態(tài)會(huì)重新渲染

    componentDidMount() {
      // 此時(shí),就可以獲取到組件內(nèi)部的DOM對(duì)象
      console.warn("componentDidMount", document.getElementById("btn"))
    }
    組件生命周期 - 運(yùn)行階段(Updating)

    特點(diǎn):該階段的函數(shù)執(zhí)行多次

    說(shuō)明:每當(dāng)組件的props或者state改變的時(shí)候,都會(huì)觸發(fā)運(yùn)行階段的函數(shù)

    componentWillReceiveProps()

    說(shuō)明:組件接受到新的props前觸發(fā)這個(gè)方法

    參數(shù):當(dāng)前組件props

    可以通過(guò) this.props 獲取到上一次的值

    使用:若你需要響應(yīng)屬性的改變,可以通過(guò)對(duì)比this.propsnextProps并在該方法中使用this.setState()處理狀態(tài)改變

    注意:修改state不會(huì)觸發(fā)該方法

    componentWillReceiveProps(nextProps) {
      console.warn("componentWillReceiveProps", nextProps)
    }
    shouldComponentUpdate()

    作用:根據(jù)這個(gè)方法的返回值決定是否重新渲染組件,返回true重新渲染,否則不渲染

    優(yōu)勢(shì):通過(guò)某個(gè)條件渲染組件,降低組件渲染頻率,提升組件性能

    說(shuō)明:如果返回值為false,那么,后續(xù)render()方法不會(huì)被調(diào)用

    注意:這個(gè)方法必須返回布爾值?。?!

    場(chǎng)景:根據(jù)隨機(jī)數(shù)決定是否渲染組件

    // - 參數(shù):
    //   - 第一個(gè)參數(shù):最新屬性對(duì)象
    //   - 第二個(gè)參數(shù):最新?tīng)顟B(tài)對(duì)象
    shouldComponentUpdate(nextProps, nextState) {
      console.warn("shouldComponentUpdate", nextProps, nextState)
    
      return nextState.count % 2 === 0
    }
    componentWillUpdate()

    作用:組件將要更新

    參數(shù):最新的屬性和狀態(tài)對(duì)象

    注意:不能修改狀態(tài) 否則會(huì)循環(huán)渲染

    componentWillUpdate(nextProps, nextState) {
      console.warn("componentWillUpdate", nextProps, nextState)
    }
    render() 渲染

    作用:重新渲染組件,與Mounting階段的render是同一個(gè)函數(shù)

    注意:這個(gè)函數(shù)能夠執(zhí)行多次,只要組件的屬性或狀態(tài)改變了,這個(gè)方法就會(huì)重新執(zhí)行

    componentDidUpdate()

    作用:組件已經(jīng)被更新

    參數(shù):舊的屬性和狀態(tài)對(duì)象

    componentDidUpdate(prevProps, prevState) {
      console.warn("componentDidUpdate", prevProps, prevState)
    }
    組件生命周期 - 卸載階段(Unmounting)

    組件銷(xiāo)毀階段:組件卸載期間,函數(shù)比較單一,只有一個(gè)函數(shù),這個(gè)函數(shù)也有一個(gè)顯著的特點(diǎn):組件一輩子只能執(zhí)行依次!

    使用說(shuō)明:只要組件不再被渲染到頁(yè)面中,那么這個(gè)方法就會(huì)被調(diào)用( 渲染到頁(yè)面中 -> 不再渲染到頁(yè)面中 )

    componentWillUnmount()

    作用:在卸載組件的時(shí)候,執(zhí)行清理工作,比如

    1 清除定時(shí)器

    2 清除componentDidMount創(chuàng)建的DOM對(duì)象

    React - createClass(不推薦)

    React.createClass({}) 方式,創(chuàng)建有狀態(tài)組件,該方式已經(jīng)被廢棄!??!

    通過(guò)導(dǎo)入 require("create-react-class"),可以在不適用ES6的情況下,創(chuàng)建有狀態(tài)組件

    getDefaultProps() 和 getInitialState() 方法:是 createReactClass() 方式創(chuàng)建組件中的兩個(gè)函數(shù)

    React without ES6

    React 不適用ES6

    var createReactClass = require("create-react-class");
    var Greeting = createReactClass({
      // 初始化 props
      getDefaultProps: function() {
        console.log("getDefaultProps");
        return {
          title: "Basic counter!!!"
        }
      },
    
      // 初始化 state
      getInitialState: function() {
        console.log("getInitialState");
        return {
          count: 0
        }
      },
    
      render: function() {
        console.log("render");
        return (
          

    {this.props.title}

    {this.state.count}
    ); }, handleIncrement: function() { var newCount = this.state.count + 1; this.setState({count: newCount}); }, propTypes: { title: React.PropTypes.string } }); ReactDOM.render( React.createElement(Greeting), document.getElementById("app") );
    state和setState

    注意:使用 setState() 方法修改狀態(tài),狀態(tài)改變后,React會(huì)重新渲染組件

    注意:不要直接修改state屬性的值,這樣不會(huì)重新渲染組件!??!

    使用:1 初始化state 2 setState修改state

    // 修改state(不推薦使用)
    // https://facebook.github.io/react/docs/state-and-lifecycle.html#do-not-modify-state-directly
    this.state.test = "這樣方式,不會(huì)重新渲染組件";
    constructor(props) {
      super(props)
    
      // 正確姿勢(shì)!!!
      // -------------- 初始化 state --------------
      this.state = {
        count: props.initCount
      }
    }
    
    componentWillMount() {
      // -------------- 修改 state 的值 --------------
      // 方式一:
      this.setState({
        count: this.state.count + 1
      })
    
      this.setState({
        count: this.state.count + 1
      }, function(){
        // 由于 setState() 是異步操作,所以,如果想立即獲取修改后的state
        // 需要在回調(diào)函數(shù)中獲取
        // https://doc.react-china.org/docs/react-component.html#setstate
      });
    
      // 方式二:
      this.setState(function(prevState, props) {
        return {
          counter: prevState.counter + props.increment
        }
      })
    
      // 或者 - 注意: => 后面需要帶有小括號(hào),因?yàn)榉祷氐氖且粋€(gè)對(duì)象
      this.setState((prevState, props) => ({
        counter: prevState.counter + props.increment
      }))
    }
    組件綁定事件

    1 通過(guò)React事件機(jī)制 onClick 綁定

    2 JS原生方式綁定(通過(guò) ref 獲取元素)

    注意:ref 是React提供的一個(gè)特殊屬性

    ref的使用說(shuō)明:react ref

    React中的事件機(jī)制 - 推薦

    注意:事件名稱采用駝峰命名法

    例如:onClick 用來(lái)綁定單擊事件

    JS原生方式 - 知道即可

    說(shuō)明:給元素添加 ref 屬性,然后,獲取元素綁定事件

    // JSX
    // 將當(dāng)前DOM的引用賦值給 this.txtInput 屬性
     this.txtInput = input } type="button" value="我是豆豆" />
    
    componentDidMount() {
      // 通過(guò) this.txtInput 屬性獲取元素綁定事件
      this.txtInput.addEventListener(() => {
        this.setState({
          count:this.state.count + 1
        })
      })
    }
    事件綁定中的this

    1 通過(guò) bind 綁定

    2 通過(guò) 箭頭函數(shù) 綁定

    通過(guò)bind綁定

    原理:bind能夠調(diào)用函數(shù),改變函數(shù)內(nèi)部this的指向,并返回一個(gè)新函數(shù)

    說(shuō)明:bind第一個(gè)參數(shù)為返回函數(shù)中this的指向,后面的參數(shù)為傳給返回函數(shù)的參數(shù)

    // 自定義方法:
    handleBtnClick(arg1, arg2) {
      this.setState({
        msg: "點(diǎn)擊事件修改state的值" + arg1 + arg2
      })
    }
    
    render() {
      return (
        

    {this.state.msg}

    ) }

    在構(gòu)造函數(shù)中使用bind

    constructor() {
      super()
    
      this.handleBtnClick = this.handleBtnClick.bind(this)
    }
    
    // render() 方法中:
    
    通過(guò)箭頭函數(shù)綁定

    原理:箭頭函數(shù)中的this由所處的環(huán)境決定,自身不綁定this

     { this.handleBtnClick("參數(shù)1", "參數(shù)2") }
    } />
    
    handleBtnClick(arg1, arg2) {
      this.setState({
        msg: "在構(gòu)造函數(shù)中綁定this并傳參" + arg1 + arg2
      });
    }
    受控組件

    表單和受控組件

    非受控組件

    在HTML當(dāng)中,像input,textareaselect這類表單元素會(huì)維持自身狀態(tài),并根據(jù)用戶輸入進(jìn)行更新。
    在React中,可變的狀態(tài)通常保存在組件的state中,并且只能用 setState() 方法進(jìn)行更新.
    React根據(jù)初始狀態(tài)渲染表單組件,接受用戶后續(xù)輸入,改變表單組件內(nèi)部的狀態(tài)。
    因此,將那些值由React控制的表單元素稱為:受控組件。

    受控組件的特點(diǎn):

    1 表單元素

    2 由React通過(guò)JSX渲染出來(lái)

    3 由React控制值的改變,也就是說(shuō)想要改變?cè)氐闹?,只能通過(guò)React提供的方法來(lái)修改

    注意:只能通過(guò)setState來(lái)設(shè)置受控組件的值

    // 模擬實(shí)現(xiàn)文本框數(shù)據(jù)的雙向綁定
    
    
    // 當(dāng)文本框內(nèi)容改變的時(shí)候,觸發(fā)這個(gè)事件,重新給state賦值
    handleTextChange = event => {
      console.log(event.target.value)
    
      this.setState({
        msg: event.target.value
      })
    }
    評(píng)論列表案例
    [
      {name: "小明", content: "沙發(fā)!?。?},
      {name: "小紅", content: "小明,居然是你"},
      {name: "小剛", content: "小明,放學(xué)你別走!??!"},
    ]
    props校驗(yàn)

    作用:通過(guò)類型檢查,提高程序的穩(wěn)定性

    命令:npm i -S prop-types

    類型校驗(yàn)文檔

    使用:給類提供一個(gè)靜態(tài)屬性 propTypes(對(duì)象),來(lái)約束props

    // 引入模塊
    import PropTypes from "prop-types"
    
    // ...以下代碼是類的靜態(tài)屬性:
    // propTypes 靜態(tài)屬性的名稱是固定的?。。?static propTypes = {
      initCount: PropTypes.number, // 規(guī)定屬性的類型
      initAge: PropTypes.number.isRequired // 規(guī)定屬性的類型,且規(guī)定為必傳字段
    }
    React 單向數(shù)據(jù)流

    React 中采用單項(xiàng)數(shù)據(jù)流

    數(shù)據(jù)流動(dòng)方向:自上而下,也就是只能由父組件傳遞到子組件

    數(shù)據(jù)都是由父組件提供的,子組件想要使用數(shù)據(jù),都是從父組件中獲取的

    如果多個(gè)組件都要使用某個(gè)數(shù)據(jù),最好將這部分共享的狀態(tài)提升至他們最近的父組件當(dāng)中進(jìn)行管理

    單向數(shù)據(jù)流

    狀態(tài)提升

    react中的單向數(shù)據(jù)流動(dòng):
    1 數(shù)據(jù)應(yīng)該是從上往下流動(dòng)的,也就是由父組件將數(shù)據(jù)傳遞給子組件
    2 數(shù)據(jù)應(yīng)該是由父組件提供,子組件要使用數(shù)據(jù)的時(shí)候,直接從子組件中獲取
    
    在我們的評(píng)論列表案例中:數(shù)據(jù)是由CommentList組件(父組件)提供的
    子組件 CommentItem 負(fù)責(zé)渲染評(píng)論列表,數(shù)據(jù)是由 父組件提供的
    子組件 CommentForm 負(fù)責(zé)獲取用戶輸入的評(píng)論內(nèi)容,最終也是把用戶名和評(píng)論內(nèi)容傳遞給了父組件,由父組件負(fù)責(zé)處理這些數(shù)據(jù)( 把數(shù)據(jù)交給 CommentItem 由這個(gè)組件負(fù)責(zé)渲染 )
    組件通訊

    父 -> 子:props

    子 -> 父:父組件通過(guò)props傳遞回調(diào)函數(shù)給子組件,子組件調(diào)用函數(shù)將數(shù)據(jù)作為參數(shù)傳遞給父組件

    兄弟組件:因?yàn)镽eact是單向數(shù)據(jù)流,因此需要借助父組件進(jìn)行傳遞,通過(guò)父組件回調(diào)函數(shù)改變兄弟組件的props

    React中的狀態(tài)管理: flux(提出狀態(tài)管理的思想) -> Redux -> mobx

    Vue中的狀態(tài)管理: Vuex

    簡(jiǎn)單來(lái)說(shuō),就是統(tǒng)一管理了項(xiàng)目中所有的數(shù)據(jù),讓數(shù)據(jù)變的可控

    組件通訊

    Context特性

    注意:如果不熟悉React中的數(shù)據(jù)流,不推薦使用這個(gè)屬性

    這是一個(gè)實(shí)驗(yàn)性的API,在未來(lái)的React版本中可能會(huì)被更改

    作用:跨級(jí)傳遞數(shù)據(jù)(爺爺給孫子傳遞數(shù)據(jù)),避免向下每層手動(dòng)地傳遞props

    說(shuō)明:需要配合PropTypes類型限制來(lái)使用

    class Grandfather extends React.Component {
      // 類型限制(必須),靜態(tài)屬性名稱固定
      static childContextTypes = {
        color: PropTypes.string.isRequired
      }
    
      // 傳遞給孫子組件的數(shù)據(jù)
      getChildContext() {
        return {
          color: "red"
        }
      }
    
      render() {
        return (
          
        )
      }
    }
    
    class Child extends React.Component {
      // 類型限制,靜態(tài)屬性名字固定
      static contextTypes = {
        color: PropTypes.string
      }
    
      render() {
        return (
          // 從上下文對(duì)象中獲取爺爺組件傳遞過(guò)來(lái)的數(shù)據(jù)
          

    爺爺告訴文字是紅色的

    ) } } class Father extends React.Component { render() { return ( ) } }
    react-router

    react router 官網(wǎng)

    react router github

    安裝:npm i -S react-router-dom

    基本概念說(shuō)明

    Router組件本身只是一個(gè)容器,真正的路由要通過(guò)Route組件定義

    使用步驟

    1 導(dǎo)入路由組件

    2 使用 作為根容器,包裹整個(gè)應(yīng)用(JSX)

    在整個(gè)應(yīng)用程序中,只需要使用一次

    3 使用 作為鏈接地址,并指定to屬性

    4 使用 展示路由內(nèi)容

    // 1 導(dǎo)入組件
    import {
      HashRouter as Router,
      Link, Route
    } from "react-router-dom"
    
    // 2 使用 
    
    
        // 3 設(shè)置 Link
        首頁(yè)
        電影
        關(guān)于
    
        // 4 設(shè)置 Route
        // exact 表示:絕對(duì)匹配(完全匹配,只匹配:/)
        
        
        
    
    
    注意點(diǎn)

    :作為整個(gè)組件的根元素,是路由容器,只能有一個(gè)唯一的子元素

    :類似于vue中的標(biāo)簽,to 屬性指定路由地址

    :類似于vue中的,指定路由內(nèi)容(組件)展示位置

    路由參數(shù)

    配置:通過(guò)Route中的path屬性來(lái)配置路由參數(shù)

    獲?。?b>this.props.match.params 獲取

    // 配置路由參數(shù)
    
    
    // 獲取路由參數(shù)
    const type = this.props.match.params.movieType
    路由跳轉(zhuǎn)

    react router - history

    history.push() 方法用于在JS中實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)

    history.go(-1) 用來(lái)實(shí)現(xiàn)頁(yè)面的前進(jìn)(1)和后退(-1)

    this.props.history.push("/movie/movieDetail/" + movieId)
    fetch

    作用:Fetch 是一個(gè)現(xiàn)代的概念, 等同于 XMLHttpRequest。它提供了許多與XMLHttpRequest相同的功能,但被設(shè)計(jì)成更具可擴(kuò)展性和高效性。

    fetch() 方法返回一個(gè)Promise對(duì)象

    fetch 基本使用

    fetch Response

    fetch 介紹

    Javascript 中的神器——Promise

    /*
      通過(guò)fetch請(qǐng)求回來(lái)的數(shù)據(jù),是一個(gè)Promise對(duì)象.
      調(diào)用then()方法,通過(guò)參數(shù)response,獲取到響應(yīng)對(duì)象
      調(diào)用 response.json() 方法,解析服務(wù)器響應(yīng)數(shù)據(jù)
      再次調(diào)用then()方法,通過(guò)參數(shù)data,就獲取到數(shù)據(jù)了
    */
    fetch("/api/movie/" + this.state.movieType)
      // response.json() 讀取response對(duì)象,并返回一個(gè)被解析為JSON格式的promise對(duì)象
      .then((response) => response.json())
      // 通過(guò) data 獲取到數(shù)據(jù)
      .then((data) => {
        console.log(data);
        this.setState({
          movieList: data.subjects,
          loaing: false
        })
      })
    跨域獲取數(shù)據(jù)的三種常用方式

    1 JSONP

    2 代理

    3 CORS

    JSONP

    安裝:npm i -S fetch-jsonp

    利用JSONP實(shí)現(xiàn)跨域獲取數(shù)據(jù),只能獲取GET請(qǐng)求

    fetch-jsonp

    fetch-jsonp

    限制:1 只能發(fā)送GET請(qǐng)求 2 需要服務(wù)端支持JSONP請(qǐng)求

    /* movielist.js */
    fetchJsonp("https://api.douban.com/v2/movie/in_theaters")
      .then(rep => rep.json())
      .then(data => { console.log(data) })
    代理

    webpack-dev-server 代理配置如下:

    問(wèn)題:webpack-dev-server 是開(kāi)發(fā)期間使用的工具,項(xiàng)目上線了就不再使用 webpack-dev-server

    解決:項(xiàng)目上線后的代碼,也是會(huì)部署到一個(gè)服務(wù)器中,這個(gè)服務(wù)器配置了代理功能即可(要求兩個(gè)服務(wù)器中配置的代理規(guī)則相同)

    // webpack-dev-server的配置
    devServer: {
      // https://webpack.js.org/configuration/dev-server/#devserver-proxy
      // https://github.com/chimurai/http-proxy-middleware#http-proxy-options
      // http://www.jianshu.com/p/3bdff821f859
      proxy: {
        // 使用:/api/movie/in_theaters
        // 訪問(wèn) ‘/api/movie/in_theaters’ ==> "https://api.douban.com/v2/movie/in_theaters"
        "/api": {
          // 代理的目標(biāo)服務(wù)器地址
          target: "https://api.douban.com/v2",
          // https請(qǐng)求需要該設(shè)置
          secure: false,
          // 必須設(shè)置該項(xiàng)
          changeOrigin: true,
          // "/api/movie/in_theaters" 路徑重寫(xiě)為:"/movie/in_theaters"
          pathRewrite: {"^/api" : ""}
        }
      }
    }
    
    /* movielist.js */
    fetch("/api/movie/in_theaters")
      .then(function(data) {
        // 將服務(wù)器返回的數(shù)據(jù)轉(zhuǎn)化為 json 格式
        return data.json()
      })
      .then(function(rep) {
        // 獲取上面格式化后的數(shù)據(jù)
        console.log(rep);
      })
    CORS - 服務(wù)器端配合

    示例:NodeJS設(shè)置跨域

    跨域資源共享 CORS 詳解 - 阮一峰

    // 通過(guò)Express的中間件來(lái)處理所有請(qǐng)求
    app.use("*", function (req, res, next) {
      // 設(shè)置請(qǐng)求頭為允許跨域
      res.header("Access-Control-Allow-Origin", "*");
    
      // 設(shè)置服務(wù)器支持的所有頭信息字段
      res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization,Accept,X-Requested-With");
      // 設(shè)置服務(wù)器支持的所有跨域請(qǐng)求的方法
      res.header("Access-Control-Allow-Methods", "POST,GET");
      // next()方法表示進(jìn)入下一個(gè)路由
      next();
    });
    redux

    狀態(tài)管理工具,用來(lái)管理應(yīng)用中的數(shù)據(jù)

    核心

    Action:行為的抽象,視圖中的每個(gè)用戶交互都是一個(gè)action

    比如:點(diǎn)擊按鈕

    Reducer:行為響應(yīng)的抽象,也就是:根據(jù)action行為,執(zhí)行相應(yīng)的邏輯操作,更新state

    比如:點(diǎn)擊按鈕后,添加任務(wù),那么,添加任務(wù)這個(gè)邏輯放到 Reducer 中

    1 創(chuàng)建State

    Store:

    1 Redux應(yīng)用只能有一個(gè)store

    2 getState():獲取state

    3 dispatch(action):更新state

    /* action */
    
    // 在 redux 中,action 就是一個(gè)對(duì)象
    // action 必須提供一個(gè):type屬性,表示當(dāng)前動(dòng)作的標(biāo)識(shí)
    // 其他的參數(shù):表示這個(gè)動(dòng)作需要用到的一些數(shù)據(jù)
    { type: "ADD_TODO", name: "要添加的任務(wù)名稱" }
    
    // 這個(gè)動(dòng)作表示要切換任務(wù)狀態(tài)
    { type: "TOGGLE_TODO", id: 1 }
    /* reducer */
    
    // 第一個(gè)參數(shù):表示狀態(tài)(數(shù)據(jù)),我們需要給初始狀態(tài)設(shè)置默認(rèn)值
    // 第二個(gè)參數(shù):表示 action 行為
    function todo(state = [], action) {
      switch(action.type) {
        case "ADD_TODO":
          state.push({ id: Math.random(), name: action.name, completed: false })
          return state
        case "TOGGLE_TODO":
          for(var i = 0; i < state.length; i++) {
            if (state[i].id === action.id) {
              state[i].completed = !state[i].completed
              break
            }
          }
          return state
        default:
          return state
      }
    }
    
    // 要執(zhí)行 ADD_TODO 這個(gè)動(dòng)作:
    dispatch( { type: "ADD_TODO", name: "要添加的任務(wù)名稱" } )
    
    // 內(nèi)部會(huì)調(diào)用 reducer
    todo(undefined, { type: "ADD_TODO", name: "要添加的任務(wù)名稱" })

    推薦大家使用Fundebug,一款很好用的BUG監(jiān)控工具~

    文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/92630.html

    相關(guān)文章

    • JS正則表達(dá)式入門(mén)看這篇就夠了

      摘要:如果遇到非常的復(fù)雜的匹配,正則表達(dá)式的優(yōu)勢(shì)就更加明顯了。關(guān)于正則表達(dá)式書(shū)寫(xiě)規(guī)則,可查看,上面說(shuō)的很清楚了,我就不貼出來(lái)了。替換與正則表達(dá)式匹配的子串,并返回替換后的字符串。結(jié)語(yǔ)正則表達(dá)式并不難,懂了其中的套路之后,一切都變得簡(jiǎn)單了。 前言 在正文開(kāi)始前,先說(shuō)說(shuō)正則表達(dá)式是什么,為什么要用正則表達(dá)式?正則表達(dá)式在我個(gè)人看來(lái)就是一個(gè)瀏覽器可以識(shí)別的規(guī)則,有了這個(gè)規(guī)則,瀏覽器就可以幫我們判斷...

      wenzi 評(píng)論0 收藏0
    • ES6入門(mén)看這篇就夠了

      摘要:從入門(mén)到放棄是什么,黑歷史,不講,自己百度去。類你沒(méi)有看錯(cuò),這里面的就沒(méi)有問(wèn)題的。之前我們用過(guò),和有了,再也不用這兩個(gè)貨了。一個(gè)函數(shù),可以遍歷狀態(tài)感覺(jué)就是狀態(tài)機(jī),好吧不說(shuō)了再說(shuō)就懵逼了。 ES6從入門(mén)到放棄 1.ES6是什么,黑歷史,不講,自己百度去。 2.在瀏覽器中如何使用? 1.babel babeljs.io在線編譯 2.traceur-----Google出的編譯器,把E...

      lewinlee 評(píng)論0 收藏0
    • 監(jiān)聽(tīng)器入門(mén)看這篇就夠了

      摘要:但監(jiān)聽(tīng)器要在事件源上實(shí)現(xiàn)接口也就是說(shuō),直接用一個(gè)類實(shí)現(xiàn)和接口是監(jiān)聽(tīng)不到內(nèi)對(duì)象的變化的。 什么是監(jiān)聽(tīng)器 監(jiān)聽(tīng)器就是一個(gè)實(shí)現(xiàn)特定接口的普通java程序,這個(gè)程序?qū)iT(mén)用于監(jiān)聽(tīng)另一個(gè)java對(duì)象的方法調(diào)用或?qū)傩愿淖?,?dāng)被監(jiān)聽(tīng)對(duì)象發(fā)生上述事件后,監(jiān)聽(tīng)器某個(gè)方法將立即被執(zhí)行。。 為什么我們要使用監(jiān)聽(tīng)器? 監(jiān)聽(tīng)器可以用來(lái)檢測(cè)網(wǎng)站的在線人數(shù),統(tǒng)計(jì)網(wǎng)站的訪問(wèn)量等等! 監(jiān)聽(tīng)器組件 監(jiān)聽(tīng)器涉及三個(gè)組件:事件...

      eechen 評(píng)論0 收藏0
    • Lombok 看這篇就夠了

      摘要:注解在類上為類提供一個(gè)全參的構(gòu)造方法,加了這個(gè)注解后,類中不提供默認(rèn)構(gòu)造方法了。這個(gè)注解用在類上,使用類中所有帶有注解的或者帶有修飾的成員變量生成對(duì)應(yīng)的構(gòu)造方法。 轉(zhuǎn)載請(qǐng)注明原創(chuàng)地址:http://www.54tianzhisheng.cn/2018/01/07/lombok/ showImg(http://ohfk1r827.bkt.clouddn.com/blog/180107/7...

      LeanCloud 評(píng)論0 收藏0
    • Python 3 入門(mén)看這篇就夠了

      摘要:縮進(jìn)不一致,會(huì)導(dǎo)致運(yùn)行錯(cuò)誤。變量變量在使用前必須先定義即賦予變量一個(gè)值,否則會(huì)報(bào)錯(cuò)數(shù)據(jù)類型布爾只有和兩個(gè)值,表示真或假。 簡(jiǎn)介 Python 是一種高層次的結(jié)合了解釋性、編譯性、互動(dòng)性和面向?qū)ο蟮哪_本語(yǔ)言。Python 由 Guido van Rossum 于 1989 年底在荷蘭國(guó)家數(shù)學(xué)和計(jì)算機(jī)科學(xué)研究所發(fā)明,第一個(gè)公開(kāi)發(fā)行版發(fā)行于 1991 年。 特點(diǎn) 易于學(xué)習(xí):Python ...

      Shimmer 評(píng)論0 收藏0
    • 你真的完全了解Java動(dòng)態(tài)代理嗎?看這篇就夠了

      摘要:動(dòng)態(tài)地代理,可以猜測(cè)一下它的含義,在運(yùn)行時(shí)動(dòng)態(tài)地對(duì)某些東西代理,代理它做了其他事情。所以動(dòng)態(tài)代理的內(nèi)容重點(diǎn)就是這個(gè)。所以下一篇我們來(lái)細(xì)致了解下的到底是怎么使用動(dòng)態(tài)代理的。 之前講了《零基礎(chǔ)帶你看Spring源碼——IOC控制反轉(zhuǎn)》,本來(lái)打算下一篇講講Srping的AOP的,但是其中會(huì)涉及到Java的動(dòng)態(tài)代理,所以先單獨(dú)一篇來(lái)了解下Java的動(dòng)態(tài)代理到底是什么,Java是怎么實(shí)現(xiàn)它的。 ...

      haitiancoder 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <