120分鐘React快速掃盲教程

  在教程開端先說些題外話,我喜歡在學習一門新技術或讀過一本書后,寫一篇教程或總結,既能幫助消化,也能加深印象和發現自己未注意的細節,寫的過程其實仍然是一個學習的過程。有個記錄的話,在未來需要用到相關知識時,也方便自己查閱。

  React既不是一個MVC框架,也不是一個模板引擎,而是Facebook在2013年推出的一個專注于視圖層,用來構建用戶界面的JavaScript庫。它推崇組件式應用開發,而組件(component)是一段獨立的、可重用的、用于完成某個功能的代碼,包含了HTML、CSS和JavaScript三部分內容。React為了保持靈活性,只實現了核心功能,提供了少量的API,一些DOM方法都被剝離到了react-dom.js中。這么做雖然輕巧,但有時候要完成特定的業務場景,還是需要與其他庫結合,例如Redux、Flux等。React不僅讓函數式編程愈加流行,還引入了JSX語法(能把HTML嵌入進JavaScript中)和Virtual DOM技術,大大提升了更新頁面時的性能。在React中,每個組件的呈現和行為都由特定的數據所決定,而數據的流動都是單向的,即單向數據流。在編寫React時,推薦使用ES6語法,官方的文檔也使用了ES6語法,因此,在學習React之前,建議對ES6有所了解,避免不必要的困惑。

  下面是一段較為完整的React代碼,本文大部分的示例代碼來源于此,閱讀下面的代碼可以對React有一個感性的認識。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
class Search extends Component {//static defaultProps = {//    url: "http://jane.com"//};
    constructor(props) {super(props);this.state = {txt: "請輸入關鍵字"};
    }componentWillMount() {console.log("component will mount");}componentDidMount() {console.log("component did mount");this.refs.txt.addEventListener("blur", (e) => {this.getValue(e);});console.log(this.refs)}handle(keyword, e) {console.log(keyword);console.log(this);console.log(this.select.value);}getValue(e) {console.log(e.target.value);}refresh(e) {this.setState({type: e.target.value});}
    render() {console.log("render");let {type} = this.state;console.log(type);return (<div>{this.props.children}<select value={type} onChange={this.refresh.bind(this)}><option value="1">標題</option><option value="2">內容</option></select><select defaultValue={2} ref={(select) => this.select = select}><option value="1">標題</option><option value="2">內容</option></select><input placeholder={this.state.txt} ref="txt" defaultValue="教程" style={{marginLeft:10, textAlign:"center"}}/><button className="btn" data-url={this.props.url} onClick={this.handle.bind(this, "REACT")}>{"<搜索>"}</button></div>
        );}
}
Search.defaultProps = {url: "http://jane.com"
};
ReactDOM.render(<Search url="http://www.pwstrick.com"><h1>React掃盲教程</h1></Search>,document.getElementById("container")
);

一、JSX語法

  JSX是對JavaScript語法的一種擴展,它看起來像HTML,同樣擁有清晰的DOM樹狀結構和元素屬性,如下代碼所示。但與HTML不同的是,為了避免自動插入分號時出現問題,在最外層得用圓括號包裹,并且必須用一個元素包裹(例如下面的<div>元素)其它元素,所有的元素還必須得閉合。

(<div><input placeholder={this.state.txt} /><button className="btn">{"<搜索>"}</button>
</div>)

1)元素

  JSX中的元素分為兩種:DOM元素和組件元素(也叫React元素),DOM元素就是HTML文檔映射的節點,首字母要小寫;而組件元素的首字母要大寫。無論是DOM元素還是組件元素,最終都會通過React.createElement()方法轉換成JSON對象,如下所示,JSON對象是簡化過的。

//React.createElement()方法
React.createElement("div", null, [React.createElement("input", { placeholder: `${this.state.txt}` }, null),React.createElement("button", { className: "btn" }, "<搜索>")
]);
//簡化過的JSON對象
{type: "div",props: {children: [{type: "input",props: {placeholder: `${this.state.txt}`}},{type: "button",props: {className: "btn",children: "<搜索>"}}]}
}

  由于JSX中的元素能夠被編譯成對象,因此還可以把它們應用到條件、循環等語句中,或者作為一個值應用到變量和參數上。

2)屬性

  JSX中的屬性要用駝峰的方式表示,例如maxlength要改成maxLength、readonly要改成readOnly。還有兩個比較特殊的屬性:class和for,由于這兩個是JavaScript中的關鍵字,因此要改名,前者改成className,后者改成htmlFor。

  JSX中的屬性值不僅可以是字符串,還可以是表達式。如果是表達式,那么就要用花括號(“{}”)包裹。而在JSX中,任何位置都可以使用表達式。

  有一點要注意,為了防止XSS的攻擊,React會把所有要顯示到DOM中的字符串進行轉義,例如“<搜索>”轉義成“&lt;搜索&gt;”。

3)Virtual DOM

  眾所周知,DOM操作會引起重繪和重排,而這是非常消耗性能的。React能把元素轉換成對象,也就是說可以用對象來表示DOM樹,而這個存在于內存中的對象正是Virtual DOM。Virtual DOM相當于一個緩存,當數據更新后,React會重新計算Virtual DOM,再與上一次的Virtual DOM通過diff算法做比對(如下圖所示),最后只在頁面中更新修改過的DOM。由于大部分的操作都在內存中進行,因此性能將會有很大的提升。

二、組件

  組件的構建方式有3種:React.createClass()、ES6的類和函數。當用ES6的類來構建時,所有的組件都繼承自抽象基礎類React.Component,該抽象類聲明了state、props、defaultProps和displayName等屬性,定義了render()、setState()和forceUpdate()等方法。注意,在組件的構造函數constructor()中要調用super()函數,用于初始化this和執行抽象類的構造函數。

import React, { Component } from 'react';
class Search extends Component {constructor (props) {super(props);}render() {return ();}
}

  組件中的render()方法是必須的,它會返回一個元素、數字或字符串等各種值。render()是一個純函數,即輸出(返回值)只依賴輸入(參數),并且執行過程中沒有副作用(不改變外部狀態)。

  組件之間可以相互嵌套,而它們的數據流是自頂向下流動的(如下圖所示),即父組件將數據傳給子組件。此處傳遞的數據就是組件的配置參數,由props屬性控制,而組件的內部狀態保存在state屬性中。

1)props

  如果一個組件要做到可復用,那么它應該是可配置的。為此,React提供了props屬性,它的使用如下所示。

class Search extends Component {render() {return (<div><button className="btn" data-url={this.props.url}>{"<搜索>"}</button></div>
        );}
}
<Search url="http://www.pwstrick.com" />

  先給Search組件定義一個名為url的屬性,然后在組件內部,可以通過引用props屬性來獲取url的值。有一點要注意,props是只讀屬性,因此在組件內部無法修改它。

  React為組件提供了默認的配置,可以調用它的靜態屬性defaultProps。總共有兩種寫法實現默認配置,如下代碼所示,其中寫法一用到了ES6中的static關鍵字。

//寫法一
class Search extends Component {static defaultProps = {url: "http://jane.com"};
}
//寫法二
Search.defaultProps = {url: "http://jane.com"
};
<Search />

  此時,即使組件不定義url屬性,在組件內部還是會有值。

  props還有一個特殊的屬性:children,它的值是組件內的子元素,如下代碼所示,children屬性的值為“<h1>React掃盲教程</h1>”。

class Search extends Component {render() {return (<div>{this.props.children}</div>
        );}
}
<Search><h1>React掃盲教程</h1>
</Search>

2)state

  組件的呈現會隨著內部狀態和外部配置而改變,通常會在組件的構造函數中初始化需要的內部狀態,如下代碼所示,為文本框添加默認提示。

class Search extends Component {constructor (props) {super(props);this.state = {txt: "請輸入關鍵字"};}
}

  React還提供了setState()方法,用于更新組件的狀態。注意,不要通過直接為state賦值的方式來更新狀態,因為setState()方法在更新狀態后,還會調用render()方法,重新渲染組件。此外,React為了提升性能,會把多次setState()調用合并成一次,像下面這樣寫打印出的txt屬性的值仍然是前一次的值,因此狀態更新是異步的。

this.setState({txt: "React"
});
console.log(this.state.txt);    //"請輸入關鍵字"

3)生命周期

  組件的生命周期(life cycle)可簡單的分為4個階段:初始化(Initialization)、掛載(Mounting)、更新(Updation)和卸載(Unmounting),具體如下圖所示。每個階段都會對應幾個方法,其中包含will的方法會在某個方法之前被調用,而包含did的方法會在某個方法之后被調用。

1、在初始化階段,會設置props、state等屬性。

2、在掛載階段,兩個掛載方法將以組件的render()為分界點。

3、更新階段發生在傳遞props或執行setState()的時候。

4、當一個組件被移除時,就會調用componentWillUnmount()方法。

當組件在頁面中輸出時,在控制臺將依次輸出“will mount”、“render”和“did mount”。

class Search extends Component {componentWillMount() {console.log("will mount");}componentDidMount() {console.log("did mount");}render() {console.log("render");}
}

三、React和DOM

1)ReactDOM

  如果要把組件添加到真實的DOM中,那么就需要使用ReactDOM中的render()方法,如下代碼所示,其實在前面已經調用過幾次這個方法了。

ReactDOM.render(<Search />,document.getElementById("container")
);

  此方法可接收三個參數,第一個是要渲染(即添加)的元素,第二個是容器元素(即添加的位置),第三個是可選的回調函數,會在渲染或更新之后執行。

  ReactDOM還提供了另外兩個方法:unmountComponentAtNode()findDOMNode(),具體可參考官方文檔。

2)事件

  React實現了一種合成事件(SyntheticEvent),合成事件只有冒泡傳播,并且它的注冊方式、事件對象和事件處理程序中的this對象都與原生事件不同。

1、合成事件會通過設置元素的屬性來注冊事件,但與原生事件不同的是,屬性的命名要用駝峰的寫法而不是全部小寫,并且屬性值可以是任意類型而不再僅是字符串,如下代碼所示。React已經封裝好了一系列的事件類型(原生事件類型的一個子集),并且已經處理好它們的兼容性,提供的事件類型可以參考官網

class Search extends Component {handle(e) {console.log("click");}render() {return (<div><button onClick={this.handle}>搜索</button></div>
        );}
}

2、合成事件中的事件對象(event object)是一個基于W3C標準的SyntheticEvent對象的實例,它不但與原生的事件對象擁有相同的屬性和方法(例如cancelable、preventDefault()、stopPropagation()等),還完美解決了兼容性問題。

3、React的事件處理程序中的this對象默認是undefined,因為注冊的事件都是以普通函數的方式調用的。如果要讓this指向當前組件,那么可以用bind()方法或ES6的箭頭函數。

class Search extends Component {//bind()方法
    handle1(e) {console.log(this);}//箭頭函數handle2 = (e) => {console.log(this);};render() {return (<div><button onClick={this.handle1.bind(this)}>搜索</button><button onClick={this.handle2}>搜索</button></div>
        );}
}

4、在向事件處理程序傳遞參數時,要把事件對象放在最后,如下代碼所示。

class Search extends Component {handle(keyword, e) {console.log(keyword);console.log(this);}render() {return (<div><button onClick={this.handle1.bind(this, "REACT")}>搜索</button></div>
        );}
}

5、如果要為組件中某個元素注冊原生事件,那么可以利用元素的ref屬性和組件的refs對象實現。例如實現一個文本框在失去焦點時,打印輸出它的值,如下代碼所示。注意,原生事件的注冊要在componentDidMount()方法內執行。

class Search extends Component {componentDidMount() {this.refs.txt.addEventListener("blur", (e) => {this.getValue(e);});}getValue(e) {console.log(e.target.value);}render() {return (<div><input placeholder={this.state.txt} ref="txt" /></div>
        );}
}

  在上面的代碼中,ref屬性的值被設為了“txt”,此時,在refs對象中就會出現一個名為“txt”的屬性,關于這個它們的具體用法可以參考官網

3)表單

  HTML中的表單元素(例如<input>、<select>和<radio>等)在React都有相應的組件實現,React還把表單中的組件分為受控和非受控。

  受控組件(controlled component)的狀態由React組件控制,它的每個狀態的改變都會有一個與之對應的事件處理程序,并且在程序內部會調用setState()方法更新狀態。React推薦使用受控組件,下面是一個受控組件,注意,選擇框(<select>元素)中的value屬性表示選中項。

class Search extends Component {refresh(e) {this.setState({type: e.target.value});}render() {let {type} = this.state;return (<div><select value={type} onChange={this.refresh.bind(this)}><option value="1">標題</option><option value="2">內容</option></select></div>
        );}
}

  非受控組件(uncontrolled component)的狀態不受React組件控制,也不用為每個狀態編寫對應的事件處理程序,但可以通過元素的ref屬性獲取它的值,非受控組件的寫法更像是傳統的DOM操作。在使用非受控組件時,如果要為其設置默認值,可以使用屬性defaultValue或defaultChecked,具體如下所示。

class Search extends Component {handle(e) {console.log(this.select.value);}render() {return (<div><select defaultValue={2} ref={(select) => this.select = select}><option value="1">標題</option><option value="2">內容</option></select><button onClick={this.handle.bind(this)}>搜索</button></div>
        );}
}

4)樣式

  在React問世的初期,由于它推崇組件模式,因此會要求HTML、CSS和JavaScript混合在一起,這與過去的關注點分離正好相反。React已將HTML用JSX封裝,而對CSS的封裝,則拋出了CSS in JS的解決方案,即用JavaScript寫CSS。

  在React中的元素都包含className和style屬性,前者可設置CSS類,后者可定義內聯樣式。style的屬性值是一個對象,其屬性就是CSS屬性,但屬性名要用駝峰的方式命名,例如margin-left改成marginLeft,具體如下所示。

class Search extends Component {render() {return (<div><input style={{marginLeft:10, textAlign:"center"}}/></div>
        );}
}

  注意,屬性名不會自動補全瀏覽器前綴,并且React會自動給需要單位的數字加上px。在MDN上給出了CSS屬性用JavaScript命名的對應關系,可在此處參考

  由于React處理CSS的功能并不強大,因此市面上出現了很多與CSS in JS相關第三方類庫,例如classnamespolished.js等,有外國網友還專門搜集了40多種相關的類庫。

  雖然這種方式能讓組件更方便的模塊化,但同時也徹底拋棄了CSS,既不能使用CSS的特性(例如選擇器、媒體查詢等),也無法再用CSS預處理器(例如SASS、LESS等)。為了解決上述問題,又有人提出了CSS Modules

  如果要在React中制作動畫,官方推薦使用React Transition GroupReact Motion。不過,你也可以使用普通的動畫庫(例如animejs),只要在DOM渲染好以后調用即可。

四、React進階

1)跨級通信

  React數據流動是單向的,組件之間通信最常見的方式是父組件通過props向子組件傳遞信息,但這種方式只能逐級傳遞,如果要跨級通信(即父組件與孫子組件通信),那么可以利用狀態提升實現,但這樣的話,代碼會顯得很不優雅并且很臃腫。好在React包含一個Context特性,可以滿足剛剛的需求,不過官方不建議大量使用該特性,因為它不但會增加組件之間的耦合性,還會讓應用變得混亂不堪,下圖演示了兩種數據傳遞的過程。在理解Context特性后,能更合理的使用狀態管理容器Redux。

?  當一個組件設置了Context后,它的子組件就能直接訪問Context中的內容,Context相當于一個全局變量,但作用域僅限于它的子組件中。總共有兩種Context的實現方式,都基于生產者消費者模式。首先來看第一種,具體代碼如下所示。

import PropTypes from 'prop-types';
class Grandpa extends Component {getChildContext() {return { name: "strick" };}render() {return (<Son />);
    }
}
Grandpa.childContextTypes = {name: PropTypes.string
};
class Son extends Component {render() {return (<Grandson />);
    }
}
class Grandson extends Component {render() {let { name } = this.context;return (<div>爺爺叫{name}</div>);
    }
}
Grandson.contextTypes = {name: PropTypes.string
};

  在上面的代碼中,創建了三個組件,Grandpa是最上層的父組件(生產者),Son是中間的子組件,Grandson是最下層的孫子組件(消費者)。首先在Grandpa中,聲明了一個靜態屬性childContextTypes和一個getChildContext()方法,這兩個是必須的,否則無法實現數據傳遞。其中childContextTypes是一個對象,它的屬性名就是要傳遞的變量名,而屬性值則通過PropTypes指明了該變量的數據類型,getChildContext()方法返回的對象就是要傳遞的一組變量和它們的值。然后在Son中渲染Grandson組件。最后為Grandson聲明一個靜態屬性contextTypes,同樣是個對象,并且屬性名和屬性值與childContextTypes中的相同。

  第二種方式是在React 16.3的版本中引入的,比起第一種方式,寫法更加簡潔,并且Context的生產者和消費者都以組件的方式實現,如下所示。

let NameContext = React.createContext({ name });
class Grandpa extends Component {render() {return (<NameContext.Provider value={{name: "strick"}}><Son /></NameContext.Provider>
        );}
}
class Son extends Component {render() {return (<Grandson />);
    }
}
class Grandson extends Component {render() {return (<NameContext.Consumer>{(context) => (<div>爺爺叫{context.name}</div>
                )}</NameContext.Consumer>
        );}
}

  上面的代碼依然創建了三個組件,名字也和第一種方式中的相同。除了中間組件Son之外,另外兩個組件的內容發生了變化。首先,通過React.createContext()方法創建一個Context對象,此對象包含兩個組件:Provider和Consumer,前者是生產者,后者是消費者。然后在Grandpa的render()方法中設置Provider組件的value屬性,此屬性相當于getChildContext()方法。最后在Grandson組件中調用Context對象,注意,Consumer組件的子節點只能是一個函數。

2)高階組件

  高階組件(higher-order component,簡稱HOC)不是一個真的組件,而是一個函數,它的參數中包含組件,其返回值是一個功能增強的新組件。高階組件是一個沒有副作用的純函數,它遵循了裝飾者模式的設計思想,不會修改傳遞進來的原組件,而是對其進行包裝和拓展,不僅增強了組件的復用性和靈活性,還保持了組件的易用性。下面演示了高階組件是如何控制props和state的。

class Button extends Component {render() {return (<div><button>{ this.props.txt }</button></div>
        );}
}
//高階組件
function HOC(Mine) {class Wrapped extends Component {constructor() {super();this.state = {txt: "提交"};}render() {return <Mine {...this.state} />;
        }}return Wrapped;
}
let Wrapped = HOC(Button);

  高階組件HOC()的函數體中創建了一個名為Wrapped的組件,在它的構造函數中初始化了state狀態。然后在其render()方法中使用了{...this.state},這是JSX的一種語法,在state對象前添加擴展運算符,可把它解構成組件的一組屬性。最后在Button組件中調用傳遞進來的屬性。

  高階組件還有遷移重復代碼、劫持render()方法和引用refs等功能。

五、后記

  就先整理這些了,如有錯誤,歡迎指正,后面還會陸續加入漏掉的知識點。

  最后,我想說下,其實自己也是一個React初學者,通過這樣的梳理后,對React有了更為深刻的理解,在后續的學習中能容易的吸收新的知識點。

?

源碼下載:

https://github.com/pwstrick/react

?

參考資料:

React中文文檔

《深入React技術棧》

React.js 小書

React WIKI

《深入淺出React和Redux》?

React入門實例教程 阮一峰

React入門教程

全棧React: 第1天 什么是 React?

深度剖析:如何實現一個 Virtual DOM 算法

從零開始學 ReactJS

react component?lifecycle

CSS Modules 入門及 React 中實踐

CSS in JS 簡介

聊一聊我對 React Context 的理解以及應用

轉載于:https://www.cnblogs.com/strick/p/10015551.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/450424.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/450424.shtml
英文地址,請注明出處:http://en.pswp.cn/news/450424.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

springmvc知識點

一、SpringMVC概述 Spring MVC 是由Spring官方提供的基于MVC設計理念的web框架。 SpringMVC是基于Servlet封裝的用于實現MVC控制的框架&#xff0c;實現前端和服務端的交互。 1.1 SpringMVC優勢 嚴格遵守了MVC分層思想 采用了松耦合、插件式結構&#xff1b;相比較于我們封裝的…

spring @component的作用

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1、controller 控制器&#xff08;注入服務&#xff09; 2、service 服務&#xff08;注入dao&#xff09; 3、repository dao&#xff…

微信小程序 懸浮按鈕

2019獨角獸企業重金招聘Python工程師標準>>> 效果視頻 https://pan.baidu.com/s/1yfrDaG9YAX0--v0EA3awZA 布局需要按照圓形排列&#xff0c;所以我們需要計算每個點的坐標 代碼部分 <view styleposition:fixed; wx:for"{{list}}" wx:for-index"i…

C語言const關鍵字—也許該被替換為readolny

const 是constant 的縮寫&#xff0c;是恒定不變的意思&#xff0c;也翻譯為常量、常數等。很不幸&#xff0c;正是因為這一點&#xff0c;很多人都認為被const 修飾的值是常量。這是不精確的&#xff0c;精確的說應該是只讀的變量&#xff0c;其值在編譯時不能被使用&#xff…

dbus服務自啟動方法

Linux 一般發行版上 "/usr/share/dbus-1/services/"目錄就是dbus放service文件的地方。 需要自動啟動的服務器 就在這個目錄放一個 service文件&#xff0c;內容如下&#xff1a; $ cat /usr/share/dbus-1/services/dhcdbd.service [D-BUS Service] Namecom.redhat.…

在Spring Boot中使用 @ConfigurationProperties 注解

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 上一篇博客寫了 如何在Spring Boot application中配置mail . 使用 Value 注解注入屬性. 但 Spring Boot 提供了另一種方式 &#xff0c;能…

Micronaut教程:如何使用基于JVM的框架構建微服務

\本文要點\\Micronaut是一種基于jvm的現代化全棧框架&#xff0c;用于構建模塊化且易于測試的微服務應用程序。\\tMicronaut提供完全的編譯時、反射無關的依賴注入和AOP。\\t該框架的開發團隊和Grails框架的開發團隊是同一個。\\tMicronaut框架集成了云技術&#xff0c;服務發現…

C語言extern關鍵詞—最會帶帽子的關鍵字

extern&#xff0c;外面的、外來的意思。那它有什么作用呢&#xff1f;舉個例子&#xff1a;假設你在大街上看到一個黑皮膚綠眼睛紅頭發的美女&#xff08;外星人&#xff1f;&#xff09;或者帥哥。你的第一反應就是這人不是國產的。extern 就相當于他們的這些區別于中國人的特…

解決Coldfusion連接MySQL數據庫的問題

在連接MySQL時&#xff0c;出現了如下錯誤&#xff1a; Connections to MySQL Community Server are not supported. Please contact MySQL to obtain a MySQL Enterprise or Commercial version. 解決方案&#xff1a; step 1: download the JDBC driver JDBC Driver for MySQ…

范式知識點

Mysql數據庫 ?前關系數據庫有六種范式&#xff1a; 第?范式&#xff08;1NF&#xff09;、第?范式&#xff08;2NF&#xff09;、第三范式&#xff08;3NF&#xff09;、巴斯-科德范式 &#xff08;BCNF&#xff09;、第四范式(4NF&#xff09;和第五范式&#xff08;5NF&a…

Tensorflow入門----占位符、常量和Session

安裝好TensorFlow之后&#xff0c;開一個python環境&#xff0c;就可以開始運行和使用TensorFlow了。 先給一個實例&#xff0c; #先導入TensorFlowimport tensorflow as tf # Create TensorFlow object called hello_constanthello_constant tf.constant(Hello World!) with …

C語言union關鍵字

union 關鍵字的用法與struct 的用法非常類似。union 維護足夠的空間來置放多個數據成員中的“一種”&#xff0c;而不是為每一個數據成員配置空間&#xff0c;在union 中所有的數據成員共用一個空間&#xff0c;同一時間只能儲存其中一個數據成員&#xff0c;所有的數據成員具有…

js 深拷貝 和 淺拷貝

1、 ...運算符 &#xff08;淺拷貝&#xff09; let obj {a:1,b:2}; let obj2 {...obj}; obj.a3 obj //{a: 3, b: 2} obj2 //{a: 1, b: 2}a {a:[{b:1}]}; b a ;b.a[0].b 2; //b {a:[{b:2}]}a // a {a:[{b:2}]} 2、 JSON.parse(JSON.stringify(參數))…

軟考如何備考

軟考上半年 報名時間 3月 考試時間 5月 備考持續時間&#xff1a;一個半月&#xff0c;每天至少兩個小時。 第一輪 基礎知識輪&#xff0c; 15天 在這一輪中如果碰到無法理解的知識點一定不要過于糾結&#xff0c;往后學&#xff0c;一般后面的學著學著之前的內容就…

Python學習第一天-第2節

*本節課內容參見&#xff1a;https://www.cnblogs.com/jin-xin/articles/7459977.html運行第一個Python程序 print(hello world) 將文本文件保存為以.py結尾的文件&#xff0c;如hello_world.py &#xff0c;在終端中&#xff0c;運行命令&#xff1a;Python hello_world.py&am…

SpringMVC之組合注解@GetMapping

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 Spring4.3中引進了&#xff5b;GetMapping、PostMapping、PutMapping、DeleteMapping、PatchMapping&#xff5d;&#xff0c;來幫助簡化…

資源下載地址

1、nginx http://nginx.org/en/download.html 2、nodejs http://nodejs.cn/download/ 3、vscode https://code.visualstudio.com/ 4、canal https://github.com/alibaba/canal/releases/download/canal-1.1.4/canal.deployer-1.1.4.tar.gz 5、jenkins https://jenkins.io/i…

C語言volatile關鍵字—最易變的關鍵字

volatile 是易變的、不穩定的意思。很多人根本就沒見過這個關鍵字&#xff0c;不知道它的存在。也有很多程序員知道它的存在&#xff0c;但從來沒用過它。我對它有種“楊家有女初長成,養在深閨人未識” 的感覺。volatile 關鍵字和const 一樣是一種類型修飾符&#xff0c;用它修…

mysql 備份腳本

#!/bin/bash INNOBACKUPEXFULL"/usr/bin/innobackupex" MYSQL_CMD --socket/ssd/mysql/3346/tmp/mysql.sock --userroot --passwordmysqlpassword --port3346 MYSQL_UP --userroot --passwordmysqlpassword --port3346 #mysqladmin的用戶名和密碼 TMPLOG"/dat…

爆棧的處理方法

爆棧指遞歸中&#xff0c;存儲的信息量大于系統棧的內存。 信息量包括元素編號&#xff0c;每一層中開的變量。 和遞歸的層數正相關。 &#xff08;雖然noip一般開棧&#xff09; 1.手寫棧 while(top){ int xsta[top]; for(each son) if(has son){ //blablabla sta[top]son; h…