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

<strike id="q6mkq"></strike>

<ul id="q6mkq"></ul>

<tfoot id="q6mkq"></tfoot>

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

立即前往

首頁/文章專欄/React初探

React初探

張金寶發布于2019-08-20 14:45 / 2585人閱讀

摘要：綁定事件后的返回值。設置屬性，將要設置的新屬性，該狀態會和當前的合并，可選參數，回調函數。方法與類似，但它會刪除原有強制更新參數說明，可選參數，回調函數。判斷組件掛載狀態返回值或，表示組件是否已掛載到中方法用于判斷組件是否已掛載到中。

React 特點

聲明式設計 ?React采用聲明范式，可以輕松描述應用。

高效 ?React通過對DOM的模擬，最大限度地減少與DOM的交互。

靈活 ?React可以與已知的庫或框架很好地配合。

JSX ? JSX 是 JavaScript 語法的擴展。React 開發不一定使用 JSX ，但我們建議使用它。

組件 ? 通過 React 構建組件，使得代碼更加容易得到復用，能夠很好的應用在大項目的開發中。

單向響應的數據流 ? React 實現了單向響應的數據流，從而減少了重復代碼，這也是它為什么比傳統數據綁定更簡單。

官網地址

簡單Demo




    
    Hello React!

引入依賴

實例中我們引入了三個庫： react.min.js 、react-dom.min.js 和 browser.min.js：
react.min.js - React 的核心庫
react-dom.min.js - 提供與 DOM 相關的功能
browser.min.js - 用于將 JSX 語法轉為 JavaScript 語法

React代碼

React JSX語法

React 使用 JSX 來替代常規的 JavaScript。JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。我們不需要一定使用 JSX，但它有以下優點：

JSX 執行更快，因為它在編譯為 JavaScript 代碼后進行了優化。

它是類型安全的，在編譯過程中就能發現錯誤。
使用 JSX 編寫模板更加簡單快速。

簡單嵌套元素

JSX 看起來類似 HTML ，我們可以看下實例:
ReactDOM.render方法接受兩個參數：
一個虛擬 DOM 節點和一個真實 DOM 節點，作用是將虛擬 DOM 掛載到真實 DOM。

實例：Hello, world!

ReactDOM.render(content,element);

ReactDOM.render(Hello, world!
,document.getElementById("example"));

index1

復雜嵌套元素

我們可以在以上代碼中嵌套多個 HTML 標簽，需要使用一個 div 元素包裹它，實例中的 p 元素添加了自定義屬性 data-myattribute，添加自定義屬性需要使用 data- 前綴。

實例：文字

ReactDOM.render(
    
        菜鳥教程
        歡迎學習 React
        這是一個很不錯的 JavaScript 庫!
    ,
    mountNode
);

index2

JavaScript 表達式

我們可以在 JSX 中使用 JavaScript 表達式。表達式寫在花括號 {} 中。實例如下：

實例：計算

ReactDOM.render(
    {1+1},mountNode
);

index3

判斷語句

在 JSX 中不能使用 if else 語句，但可以使用 conditional (三元運算) 表達式來替代。以下實例中如果變量 i 等于 1 瀏覽器將輸出 true, 如果修改 i 的值，則會輸出 false.

實例：判斷

const i = 1;
ReactDOM.render(
    
        {i == 1 ? "True!" : "False"}
    ,
    mountNode
);

index4

樣式

React 推薦使用內聯樣式。我們可以使用 camelCase 語法來設置內聯樣式. React 會在指定元素數字后自動添加 px 。以下實例演示了為 h1 元素添加 myStyle 內聯樣式：

實例：CSS樣式

const myStyle = {
    fontSize: 100,
    lineHeight: "30px",
    color: "#FF0000"
};

ReactDOM.render(
    菜鳥教程,mountNode
);

ReactDOM.render(菜鳥教程,mountNode);

ReactDOM.render(菜鳥教程
,mountNode);

index5

注釋

注釋需要寫在花括號中，實例如下：

實例：注釋

ReactDOM.render(
    
    菜鳥教程
    {/*注釋...*/}
     ,mountNode
);

React.Component組件 基礎語法 HTML 標簽 vs. React 組件

React 可以渲染 HTML 標簽 (strings) 或 React 組件 (classes)。要渲染 HTML 標簽，只需在 JSX 里使用小寫字母的標簽名。
要渲染 React 組件，只需創建一個大寫字母開頭的本地變量。

實例：創建組件

class DivElement extends React.Component{
    render() {
        return (
            arr
        );
    }
}
ReactDOM.render(, mountNode);

實例：組件嵌套

class MyComponent extends React.Component{
    render() {
        return arr;
    }
}
class DivElement extends React.Component{
    render() {
        return ;
    }
}
ReactDOM.render(, mountNode);

React 的 JSX 使用大、小寫的約定來區分本地組件的類和 HTML 標簽。

注意:

由于 JSX 就是 JavaScript，一些標識符像 class 和 for 不建議作為 XML 屬性名。作為替代，React DOM 使用 className 和 htmlFor 來做對應的屬性。

實例：組件語法

class HelloMessage extends React.Component{
    render() {
        return arr;
    }
}

class HelloMessage extends React.Component{
    render() {
        return (
            arr
        );
    }
}

React.Component方法用于生成一個組件類 HelloMessage。實例組件類并輸出信息。

注意：原生 HTML 元素名以小寫字母開頭，而自定義的 React 類名以大寫字母開頭，比如 HelloMessage 不能寫成 helloMessage。除此之外還需要注意組件類只能包含一個頂層標簽，否則也會報錯。

如果我們需要向組件傳遞參數，可以使用 this.props 對象,實例如下：

實例：獲取父元素的值

class DivElement extends React.Component{
    render() {
        return (
            {this.props.name}
        );
    }
}
ReactDOM.render(, mountNode);

以上實例中 name 屬性通過 this.props.name 來獲取（自身的數字）。
注意，在添加屬性時， class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。

復合組件

通過創建多個組件來合成一個組件，即把組件的不同功能點進行分離。
以下實例我們實現了輸出網站名字和網址的組件：

實例：鏈接

class WebSite extends React.Component{
    render() {
        return (
            
        );
    }
}
class Name extends React.Component{
    render() {
        return (
            {this.props.name}
        );
    }
}
class Link extends React.Component{
    render() {
        return (
            {this.props.site}
        );
    }
}
ReactDOM.render(, mountNode);

React State(狀態)

把組件看成是一個狀態機（State Machines）。通過與用戶的交互，實現不同狀態，然后渲染 UI，讓用戶界面和數據保持一致。React 里，只需更新組件的 state，然后根據新的 state 重新渲染用戶界面（不要操作 DOM）。

constructor()初始狀態 實例：點擊喜歡&不喜歡

class LikeButton extends React.Component{
    constructor() {
        super();
        this.state ={liked: false};
    }
    handleClick() {
        this.setState({
            liked: !this.state.liked
        });
    }
    render() {
        let text = this.state.liked ? "喜歡" : "不喜歡";
        return (
            你{text}我。點我切換狀態。
        );
    }
};
ReactDOM.render(, mountNode);

handleClick = ()=>{
    this.setState({
        liked: !this.state.liked
    });
}

constructor是組件的構造函數，會在創建實例時自動調用。
...args表示組件參數，super(...args)是 ES6 規定的寫法。
this.state對象用來存放內部狀態，這里是定義初始狀態，也就是一個對象，這個對象可以通過 this.state 屬性讀取。當用戶點擊組件，導致狀態變化，this.setState 方法就修改狀態值，每次修改以后，自動調用 this.render 方法，再次渲染組件。
onClick={this.handleClick.bind(this)}綁定事件，返回參數。
e.target.value綁定事件后的返回值。

實例：輸入文字實時顯示

class MyTitle extends React.Component{
    constructor() {
        super();
        this.state ={name: "can you speek English!"};
    }
    handleChange(e) {
        let name = e.target.value;
        this.setState({
            name: name
        });
    }
    render() {
        return (
            
                
                luuman,{this.state.name}
            
        );
    }
}
ReactDOM.render(, mountNode);

React Props

props通過組件獲取數據

基礎語法 實例：數據傳遞

class HelloMessage extends React.Component{
    render(){
        return Hello {this.props.name};
    }
}

ReactDOM.render(
    ,mountNode
);

實例中 name 屬性通過 this.props.name 來獲取。

defaultProps默認值

默認Props：你可以通過defaultProps()方法為props設置默認值，實例如下：

class HelloMessage extends React.Component{
    render(){
        return Hello {this.props.name};
    }
}
HelloMessage.defaultProps = {
    name: "Runoob"
}
ReactDOM.render(,mountNode);

class WebSite extends React.Component{
    render() {
        return (
            
        );
    }
}
WebSite.defaultProps ={
    name: "菜鳥教程",
    site: "http://www.runoob.com"
}
class Name extends React.Component{
    render() {
        return (
            {this.props.name}
        );
    }
}
class Link extends React.Component{
    render() {
        return (
            {this.props.site}
        );
    }
}
ReactDOM.render(, mountNode);

this.props.children 實例：點擊次數

class NotesList extends React.Component{
    render(){
        return(
            {
                React.Children.map(this.props.children,function(child){
                    console.log(child);
                    return {child}
                })
            }
        );
    }
}

ReactDOM.render(
    
        hello
        world
        world
        world
    ,
    mountNode
);

PropTypes驗證

Props 使用propTypes，它可以保證我們的應用組件被正確使用，React.PropTypes 提供很多驗證器 (validator) 來驗證傳入數據是否有效。當向 props 傳入無效數據時，JavaScript 控制臺會拋出警告。

實例：判斷組件屬性title是否為字符串：

const name = 123;
console.log(name);
class HelloMessage extends React.Component{
    render(){
        return Hello {this.props.title};
    }
}
HelloMessage.propTypes = {
    title: React.PropTypes.string
}
ReactDOM.render(,mountNode);

如果 title 使用數字變量，控制臺會出現以下錯誤信息：

Warning: Failed prop type: Invalid prop `title` of type `number` supplied to `HelloMessage`, expected `string`.

PropTypes屬性值

.propTypes = {
    // 可以聲明 prop 為指定的 JS 基本數據類型，默認情況，這些數據是可選的
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,
    optionalSymbol: React.PropTypes.symbol,

    // 可以被渲染的對象 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,

    //  React 元素
    optionalElement: React.PropTypes.element,

    // 用 JS 的 instanceof 操作符聲明 prop 為類的實例。
    optionalMessage: React.PropTypes.instanceOf(Message),

    // 用 enum 來限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(["News", "Photos"]),

    // 可以是多個對象類型中的一個
    optionalUnion: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number,
        React.PropTypes.instanceOf(Message)
    ]),

    // 指定類型組成的數組
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // 指定類型的屬性構成的對象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // 特定 shape 參數的對象
    optionalObjectWithShape: React.PropTypes.shape({
        color: React.PropTypes.string,
        fontSize: React.PropTypes.number
    }),

    // 任意類型加上 `isRequired` 來使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,

    // 不可空的任意類型
    requiredAny: React.PropTypes.any.isRequired,

    // 自定義驗證器。如果驗證失敗需要返回一個 Error 對象。不要直接使用 `console.warn` 或拋異常，因為這樣 `oneOfType` 會失效。
    customProp(props, propName, componentName) {
        if (!/matchme/.test(props[propName])) {
            return new Error(
                "Invalid prop `" + propName + "` supplied to" +
                " `" + componentName + "`. Validation failed."
            );
        }
    },
    customArrayProp: React.PropTypes.arrayOf(
        function(propValue, key, componentName, location, propFullName) {
            if (!/matchme/.test(propValue[key])) {
                return new Error(
                    "Invalid prop `" + propFullName + "` supplied to" +
                    " `" + componentName + "`. Validation failed."
                );
            }
        }
    )
}

state和props區別

在于props是不可變的，而子組件只能通過props來獲取數據。
而state可以根據與用戶交互來改變。這就是為什么有些容器組件需要定義state來更新和修改數據。

以下實例演示了如何在應用中組合使用state和props。我們可以在父組件中設置state，并通過在子組件上使用props將其傳遞到子組件上。在render函數中,我們設置name和site來獲取父組件傳遞過來的數據。

實例：鏈接

class WebSite extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            name: "菜鳥教程",
            site: "http://www.runoob.com"
        };
    }
    render(){
        return 
    }
}
class Name extends React.Component{
    render(){
        return {this.props.name}
    }
}
class Link extends React.Component{
    render(){
        return {this.props.site}
    }
}

ReactDOM.render(,mountNode);

React 組件 API

在本章節中我們將討論 React 組件 API。

基礎語法 mixins去重

const ExampleMixin = {
    componentDidMount(){
        // bind some event listeners here
    }
    componentWillUnmount(){
        // unbind those events here!
    }
}
class ExampleComponent extends React.Component{
    mixins: [ExampleMixin];
    render(){}
}
class AnotherComponent extends React.Component{
    mixins: [ExampleMixin];
    render(){}
}

實例：點擊次數

class Counter extends React.Component{
    constructor(){
        super();
        this.state = {
            clickCount: 0
        };
    }
    handleClick(){
        this.setState({
            clickCount: this.state.clickCount +1
        });
    }
    render(){
        return 點我！點擊次數為: {this.state.clickCount};
    }
}
ReactDOM.render(,mountNode);

React 組件生命周期

組件的生命周期可分成三個狀態：Mounting、Updating、Unmounting

Mounting：已插入真實 DOM constructor() componentWillMount()

在渲染前調用,在客戶端也在服務端。

render()

在渲染時調用

componentDidMount()

在第一次渲染后調用，只在客戶端。之后組件已經生成了對應的DOM結構，可以通過this.getDOMNode()來進行訪問。
如果你想和其他JavaScript框架一起使用，可以在這個方法中調用setTimeout, setInterval或者發送AJAX請求等操作(防止異部操作阻塞UI)。

Updating：正在被重新渲染 componentWillReceiveProps()

在組件接收到一個新的prop時被調用。這個方法在初始化render時不會被調用。

shouldComponentUpdate()

返回一個布爾值。在組件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用。
可以在你確認不需要更新組件時使用。

componentWillUpdate()

在組件接收到新的props或者state但還沒有render時被調用。在初始化時不會被調用。

render() componentDidUpdate()

在組件完成更新后立即調用。在初始化時不會被調用。

Unmounting：已移出真實 DOM componentWillUnmount()

在組件從 DOM 中移除的時候立刻被調用。

實例：定時器，每隔100毫秒重新設置組件的透明度，并重新渲染

class Hello extends React.Component{
    constructor() {
        super();
        this.state = {
            opacity: 1.0
        }
    }
    componentDidMount(){
        this.timer = setInterval(function(){
            let opacity = this.state.opacity;
            opacity -= .05;
            if(opacity < .1){
                opacity = 1.0;
            }
            this.setState({
                opacity: opacity
            })

        }.bind(this),100)
    }
    render(){
        return(
            
                Hello {this.props.name}
            
        )
    }
}

ReactDOM.render(,mountNode);

實例：點擊效果

以下實例初始化 state ， setNewnumber 用于更新 state。所有生命周期在 Content 組件中。

class Button extends React.Component{
    constructor() {
        super();
        this.state = {
            data:0
        }
    }
    setNewNumber(){
        this.setState({
            data: this.state.data + 1
        })
    }
    render(){
        return(
            
                
                
            
        )
    }
}
class Content extends React.Component{
    componentWillMount(){
        console.log("Component WILL MOUNT!")
    }
    componentDidMount(){
        console.log("Component DID MOUNT!")
    }
    componentWillReceiveProps(newProps) {
        console.log("Component WILL RECEIVE PROPS!")
    }
    shouldComponentUpdate(newProps, newState) {
        return true;
    }
    componentWillUpdate(nextProps, nextState) {
        console.log("Component WILL UPDATE!");
    }
    componentDidUpdate(prevProps, prevState) {
        console.log("Component DID UPDATE!")
    }
    componentWillUnmount(){
        console.log("Component WILL UNMOUNT!")
    }
    render(){
        return(
            
                {this.props.myNumber}
            
        )
    }
}

ReactDOM.render(

實例：統計時間

class Timer extends React.Component{
  constructor(props) {
    super(props);
    this.state = {secondsElapsed: 0};
  }
  tick(){
    this.setState((prevState) => ({
      secondsElapsed: prevState.secondsElapsed + 1
    }));
  }
  componentDidMount(){
    this.interval = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount(){
    clearInterval(this.interval);
  }
  render(){
    return (
      Seconds Elapsed: {this.state.secondsElapsed}
    );
  }
}

ReactDOM.render(, mountNode);

Lists and Keys列表遍歷

JSX 允許在模板中插入數組，數組會自動展開所有成員：

const arr = [
    菜鳥教程,
    學的不僅是技術，更是夢想！,
];
ReactDOM.render(
    {arr},mountNode
);

index6

Array.map

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number,key) =>
    {number}
);
console.log(listItems);
ReactDOM.render({listItems},mountNode);

const listItems = numbers.map(function(number,keys){
    return(
        
            {number}
        
    )
});

Array.forEach 遍歷

Array.forEach((e) => {
    alert(e);
})

Array.forEach(function(e){
    alert(e);
})

let repos = this.state.data.items;
let repoList = [];
repos.forEach((p,keys) => {
    let item = {p.name}({p.stargazers_count} stars)
{p.description};
    repoList.push(item);
})

let repos = this.state.data.items;
let repoList = repos.map(function(repo,index){
    return(
        
            {repo.name}({repo.stargazers_count} stars)

            {repo.description}
           
    );
});

Array.splice 刪除 Array.filter

方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素

Array.every Array.push Handling Events綁定事件 Forms表單 基礎語法 實例：輸入文字實時顯示

class HelloMessage extends React.Component{
    constructor(){
        super();
        this.state = {
            value: "Hello World!"
        };
    }
    handleChange(even){
        this.setState({
            value: even.target.value
        })
    }
    render(){
        let value = this.state.value;
        return(
            
                
                {value}
            
        );
    }
}
ReactDOM.render(,mountNode);

實例：輸入文字實時顯示

你需要在父組件通過創建事件句柄 (handleChange) ，并作為 prop (updateStateProp) 傳遞到你的子組件上。

class Content extends React.Component{
    render(){
        return(
            
                
                {this.props.myDataProp}
            
        )
    }
}
class HelloMessage extends React.Component{
    constructor(){
        super();
        this.state = {
            value: "Hello World!"
        };
    }
    handleChange(even){
        this.setState({
            value: even.target.value
        })
    }
    render(){
        let value = this.state.value;
        return(
            
                
            
        );
    }
}
ReactDOM.render(,mountNode);

實例：點我

class HelloMessage extends React.Component{
    constructor(){
        super();
        this.state={
            value: "Hello World!"
        }
    }
    handleChange(event){
        this.setState({
            value: "luuman is good man!"
        })
    }
    render(){
        let value = this.state.value;
        return(
            
                
                {value}
            
        )
    }
}
ReactDOM.render(,mountNode);

當你需要從子組件中更新父組件的 state 時，你需要在父組件通過創建事件句柄 (handleChange) ，并作為 prop (updateStateProp) 傳遞到你的子組件上。實例如下：

實例：點我

class Content extends React.Component{
    render(){
        return(
            
                
                {this.props.myDataProp}
            
        )
    }
}
class HelloMessage extends React.Component{
    constructor(){
        super();
        this.state = {
            value: "Hello World!"
        }
    }
    handleChange(event){
        this.setState({
            value: "luuman is good man!"
        })
    }
    render(){
        let value = this.state.value;
        return 
    }
}
ReactDOM.render(,mountNode);

Refs and the DOM React Refs

React 支持一種非常特殊的屬性 Ref ，你可以用來綁定到 render() 輸出的任何組件上。
這個特殊的屬性允許你引用 render() 返回的相應的支撐實例（ backing instance ）。這樣就可以確保在任何時間總是拿到正確的實例。

使用方法：
綁定一個 ref 屬性到 render 的返回值上：

在其它代碼中，通過 this.refs 獲取支撐實例:



var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();

實例：點我輸入框獲取焦點

class MyComponent extends React.Component{
    handleClick(){
        this.refs.myInput.focus();
    }
    render(){
        return(
            
                
                
            
        );
    }
}
ReactDOM.render(,mountNode);

當組件插入到 DOM 后，ref屬性添加一個組件的引用于到this.refs.name獲取。

實例中，我們獲取了輸入框的支撐實例的引用，子點擊按鈕后輸入框獲取焦點。
我們也可以使用 getDOMNode()方法獲取DOM元素

React AJAX

React 組件的數據可以通過 componentDidMount 方法中的 Ajax 來獲取，當從服務端獲取數據庫可以將數據存儲在 state 中，再用 this.setState 方法重新渲染 UI。
當使用異步加載數據時，在組件卸載前使用 componentWillUnmount 來取消未完成的請求。

實例

$.get(URL,function(data){})

實例：獲取 Github 用戶最新 gist 共享描述:

class UserGist extends React.Component{
    constructor() {
        super();
        this.state = {
            username: "",
            lastGistUrl: ""
        }
    }
    componentDidMount(){
        this.serverRequest = $.get(this.props.source,function(result){
            let lastGist = result[0];
            this.setState({
                username: lastGist.owner.login,
                lastGistUrl: lastGist.html_url
            })
        }.bind(this))
    }
    componentWillUnmount(){
        this.serverRequest.abort();
    }
    render(){
        return(
            
                {this.state.username}
                {this.state.lastGistUrl}
            
        )
    }
}

ReactDOM.render(,mountNode);

實例：拉取數據

import $ from "jquery";
import React from "react";
import ReactDOM from "react-dom";
const mountNode = document.getElementById("root");

class RipoList extends React.Component{
    constructor(){
        super();
        this.state = {
            loading: true,
            error: null,
            data: null
        };
    }
    componentDidMount(){
        this.props.promise.then(
            value => this.setState({
                loading: false,
                data: value
            }),
            error => this.setState({
                loading: false,
                error: error
            })
        );
    }
    render(){
        if(this.state.loading){
            return Loading...;
        }else if(this.state.error != null){
            return  Error: {this.state.error.message};
        }else{
            let repos = this.state.data.items;
            let repoList = repos.map(function(repo,index){
                return(
                    
                        {repo.name}({repo.stargazers_count} stars)

                        {repo.description}
                       
                );
            });
            return(
                
                    Most Popular JavaScript Projects in Github
                    {repoList}
                
            )
        }
    }
}
ReactDOM.render(,mountNode);

Add-Ons 添加插件 jquery

import $ from "jquery";
import React from "react";
import ReactDOM from "react-dom";

class HelloWorld extends React.Component{
    render(){
        return(
            HelloWorld
        );
    }
}

ReactDOM.render(,$("#example")[0]);

recharts

React圖表組件庫

bootstrap

React組件庫

MarkdownEditor

MarkDown

ReactDOM render()

ReactDOM.render(
    element,
    container,
    [callback]
)

unmountComponentAtNode()

ReactDOM.unmountComponentAtNode(container)

findDOMNode()

ReactDOM.findDOMNode(component)

onkeypress

/* 在實例中，我們使用了支持多瀏覽器的方法，因為 keyCode 屬性無法再 Firefox 瀏覽器中工作。但是 which 屬性可以。
如果瀏覽器支持 event.which 則使用 event.which，否則使用 event.keyCode */

ES6

ECMAScript 6 入門

let

用來聲明變量。它的用法類似于var，但是所聲明的變量，只在let命令所在的代碼塊內有效。

for循環的計數器

for (let i = 0; i < 10; i++) {}

console.log(i);
//ReferenceError: i is not defined

下面的代碼如果使用var，最后輸出的是10

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

如果使用let，聲明的變量僅在塊級作用域內有效，最后輸出的是6

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

GPU云服務器云服務器初探webrtc webrtc技術初探初探騰訊云存儲網關 SQL存儲過程初探

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/81892.html

解讀React源碼(一):初探React源碼

摘要：前言的基本概念組件的構建方法以及高級用法這背后的一切如何運轉深入內部的實現機制和原理初探源碼代碼組織結構包含一系列的工具方法插件包含一系列同構方法包含一些公用或常用方法如等包含一些測試方法等包含一些邊界錯誤的測試用例是代碼的核心部分它包含了前言 React的基本概念,API,組件的構建方法以及高級用法,這背后的一切如何運轉,深入Virtual DOM內部的實現機制和原理. 初探Rea...

Eminjannn 2019-08-20 18:31 評論0 收藏0
React 初探

摘要：各個組件維護自己的狀態和，當狀態變更，自動重新渲染整個組件。形式的定義的組件是以的形式來創建的組件的，是目前極為推薦的創建有狀態組件的方式，最終會取代形式相對于可以更好實現代碼復用。組件名稱首字母必須大寫。變量名用包裹，且不能加雙引號。目前在前端開發領域，框架Angular、react和vue占據著主流的地位而且可能會持續比較長的一段時間。三門框架中，從數據綁定機制來看，vue和an...

levy9527 2019-08-21 12:05 評論0 收藏0
React 初探

摘要：各個組件維護自己的狀態和，當狀態變更，自動重新渲染整個組件。形式的定義的組件是以的形式來創建的組件的，是目前極為推薦的創建有狀態組件的方式，最終會取代形式相對于可以更好實現代碼復用。組件名稱首字母必須大寫。變量名用包裹，且不能加雙引號。目前在前端開發領域，框架Angular、react和vue占據著主流的地位而且可能會持續比較長的一段時間。三門框架中，從數據綁定機制來看，vue和an...

trilever 2019-08-01 17:32 評論0 收藏0
react-redux初探理解

摘要：它的作用就是像它的名字那樣，建立一個從外部的對象到組件的對象的映射關系。比如表示從整個的表示當前組件容器的用來建立組件的參數到方法的映射比如表示它定義了哪些用戶的操作應該當作，傳給。最近做的項目加入了react-redux,對react-redux一直沒理解透徹，最近有時間把react-redux梳理了一番，希望能夠幫助到大家，首先有這幾個文件，action,reducer,sag...

ziwenxie 2019-08-22 16:47 評論0 收藏0
初探react技術棧（一）

摘要：相信用的同學也不少找到函數在其中中添加啟用編譯。。。react 最近已經開始使用react技術棧了，從頭開始搭建項目，有必要的記錄一下配置的過程以及項目分層的思路，這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護的腳手架應用我們一般也采用這個 $ npm or c...

劉玉平 2019-05-23 16:23 評論0 收藏0
初探React技術棧（一）

react 最近已經開始使用react技術棧了，從頭開始搭建項目，有必要的記錄一下配置的過程以及項目分層的思路，這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護的腳手架應用我們一般也采用這個 $ npm or cnpm $ npm install create-react...

neroneroffy 2019-08-26 13:53 評論0 收藏0