亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

React初探

張金寶 / 2637人閱讀

摘要：綁定事件后的返回值。設(shè)置屬性，將要設(shè)置的新屬性，該狀態(tài)會(huì)和當(dāng)前的合并，可選參數(shù)，回調(diào)函數(shù)。方法與類似，但它會(huì)刪除原有強(qiáng)制更新參數(shù)說(shuō)明，可選參數(shù)，回調(diào)函數(shù)。判斷組件掛載狀態(tài)返回值或，表示組件是否已掛載到中方法用于判斷組件是否已掛載到中。

React 特點(diǎn)

聲明式設(shè)計(jì) ?React采用聲明范式，可以輕松描述應(yīng)用。

高效 ?React通過(guò)對(duì)DOM的模擬，最大限度地減少與DOM的交互。

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

JSX ? JSX 是 JavaScript 語(yǔ)法的擴(kuò)展。React 開發(fā)不一定使用 JSX ，但我們建議使用它。

組件 ? 通過(guò) React 構(gòu)建組件，使得代碼更加容易得到復(fù)用，能夠很好的應(yīng)用在大項(xiàng)目的開發(fā)中。

單向響應(yīng)的數(shù)據(jù)流 ? React 實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡(jiǎn)單。

官網(wǎng)地址

簡(jiǎn)單Demo 



    
    Hello React!
引入依賴

實(shí)例中我們引入了三個(gè)庫(kù)： react.min.js 、react-dom.min.js 和 browser.min.js：
react.min.js - React 的核心庫(kù)
react-dom.min.js - 提供與 DOM 相關(guān)的功能
browser.min.js - 用于將 JSX 語(yǔ)法轉(zhuǎn)為 JavaScript 語(yǔ)法

React代碼
React JSX語(yǔ)法

React 使用 JSX 來(lái)替代常規(guī)的 JavaScript。JSX 是一個(gè)看起來(lái)很像 XML 的 JavaScript 語(yǔ)法擴(kuò)展。我們不需要一定使用 JSX，但它有以下優(yōu)點(diǎn)：

JSX 執(zhí)行更快，因?yàn)樗诰幾g為 JavaScript 代碼后進(jìn)行了優(yōu)化。

它是類型安全的，在編譯過(guò)程中就能發(fā)現(xiàn)錯(cuò)誤。
使用 JSX 編寫模板更加簡(jiǎn)單快速。

簡(jiǎn)單嵌套元素

JSX 看起來(lái)類似 HTML ，我們可以看下實(shí)例:
ReactDOM.render方法接受兩個(gè)參數(shù)：
一個(gè)虛擬 DOM 節(jié)點(diǎn)和一個(gè)真實(shí) DOM 節(jié)點(diǎn)，作用是將虛擬 DOM 掛載到真實(shí) DOM。

實(shí)例：Hello, world! 
ReactDOM.render(content,element);

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

index1

復(fù)雜嵌套元素

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

實(shí)例：文字 
ReactDOM.render(
    

        
菜鳥教程

        
歡迎學(xué)習(xí) React

        
這是一個(gè)很不錯(cuò)的 JavaScript 庫(kù)!

    
,
    mountNode
);

index2

JavaScript 表達(dá)式

我們可以在 JSX 中使用 JavaScript 表達(dá)式。表達(dá)式寫在花括號(hào) {} 中。實(shí)例如下：

實(shí)例：計(jì)算 
ReactDOM.render(
    
{1+1}
,mountNode
);

index3

判斷語(yǔ)句

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

實(shí)例：判斷 
const i = 1;
ReactDOM.render(
    

        
{i == 1 ? "True!" : "False"}

    
,
    mountNode
);

index4

樣式

React 推薦使用內(nèi)聯(lián)樣式。我們可以使用 camelCase 語(yǔ)法來(lái)設(shè)置內(nèi)聯(lián)樣式. React 會(huì)在指定元素?cái)?shù)字后自動(dòng)添加 px 。以下實(shí)例演示了為 h1 元素添加 myStyle 內(nèi)聯(lián)樣式：

實(shí)例：CSS樣式 
const myStyle = {
    fontSize: 100,
    lineHeight: "30px",
    color: "#FF0000"
};

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

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

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

index5

注釋

注釋需要寫在花括號(hào)中，實(shí)例如下：

實(shí)例：注釋 
ReactDOM.render(
    

    
菜鳥教程

    {/*注釋...*/}
     
,mountNode
);
React.Component組件 基礎(chǔ)語(yǔ)法 HTML 標(biāo)簽 vs. React 組件

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

實(shí)例：創(chuàng)建組件 
class DivElement extends React.Component{
    render() {
        return (
            
arr

        );
    }
}
ReactDOM.render(, mountNode);
實(shí)例：組件嵌套 
class MyComponent extends React.Component{
    render() {
        return 
arr
;
    }
}
class DivElement extends React.Component{
    render() {
        return ;
    }
}
ReactDOM.render(, mountNode);

React 的 JSX 使用大、小寫的約定來(lái)區(qū)分本地組件的類和 HTML 標(biāo)簽。

注意:

由于 JSX 就是 JavaScript，一些標(biāo)識(shí)符像 class 和 for 不建議作為 XML 屬性名。作為替代，React DOM 使用 className 和 htmlFor 來(lái)做對(duì)應(yīng)的屬性。

實(shí)例：組件語(yǔ)法 
class HelloMessage extends React.Component{
    render() {
        return 
arr
;
    }
}

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

        );
    }
}

React.Component方法用于生成一個(gè)組件類 HelloMessage。 實(shí)例組件類并輸出信息。

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

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

實(shí)例：獲取父元素的值 
class DivElement extends React.Component{
    render() {
        return (
            
{this.props.name}

        );
    }
}
ReactDOM.render(, mountNode);

以上實(shí)例中 name 屬性通過(guò) this.props.name 來(lái)獲?。ㄗ陨淼臄?shù)字）。
注意，在添加屬性時(shí)， class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因?yàn)?class 和 for 是 JavaScript 的保留字。

復(fù)合組件

通過(guò)創(chuàng)建多個(gè)組件來(lái)合成一個(gè)組件，即把組件的不同功能點(diǎn)進(jìn)行分離。
以下實(shí)例我們實(shí)現(xiàn)了輸出網(wǎng)站名字和網(wǎng)址的組件：

實(shí)例：鏈接 
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(狀態(tài))

把組件看成是一個(gè)狀態(tài)機(jī)（State Machines）。通過(guò)與用戶的交互，實(shí)現(xiàn)不同狀態(tài)，然后渲染 UI，讓用戶界面和數(shù)據(jù)保持一致。React 里，只需更新組件的 state，然后根據(jù)新的 state 重新渲染用戶界面（不要操作 DOM）。

constructor()初始狀態(tài) 實(shí)例：點(diǎn)擊喜歡&不喜歡 
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}我。點(diǎn)我切換狀態(tài)。

        );
    }
};
ReactDOM.render(, mountNode);
handleClick = ()=>{
    this.setState({
        liked: !this.state.liked
    });
}

constructor是組件的構(gòu)造函數(shù)，會(huì)在創(chuàng)建實(shí)例時(shí)自動(dòng)調(diào)用。
...args表示組件參數(shù)，super(...args)是 ES6 規(guī)定的寫法。
this.state對(duì)象用來(lái)存放內(nèi)部狀態(tài)，這里是定義初始狀態(tài)，也就是一個(gè)對(duì)象，這個(gè)對(duì)象可以通過(guò) this.state 屬性讀取。當(dāng)用戶點(diǎn)擊組件，導(dǎo)致狀態(tài)變化，this.setState 方法就修改狀態(tài)值，每次修改以后，自動(dòng)調(diào)用 this.render 方法，再次渲染組件。
onClick={this.handleClick.bind(this)}綁定事件，返回參數(shù)。
e.target.value綁定事件后的返回值。

實(shí)例：輸入文字實(shí)時(shí)顯示 
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通過(guò)組件獲取數(shù)據(jù)

基礎(chǔ)語(yǔ)法 實(shí)例：數(shù)據(jù)傳遞 
class HelloMessage extends React.Component{
    render(){
        return 
Hello {this.props.name}
;
    }
}

ReactDOM.render(
    ,mountNode
);

實(shí)例中 name 屬性通過(guò) this.props.name 來(lái)獲取。

defaultProps默認(rèn)值

默認(rèn)Props：你可以通過(guò)defaultProps()方法為props設(shè)置默認(rèn)值，實(shí)例如下：

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 實(shí)例：點(diǎn)擊次數(shù) 
class NotesList extends React.Component{
    render(){
        return(
            
    {
                React.Children.map(this.props.children,function(child){
                    console.log(child);
                    return 
  1. {child}
    2. 
                })
            }

        );
    }
}

ReactDOM.render(
    
        hello
        world
        world
        world
    ,
    mountNode
);
PropTypes驗(yàn)證

Props 使用propTypes，它可以保證我們的應(yīng)用組件被正確使用，React.PropTypes 提供很多驗(yàn)證器 (validator) 來(lái)驗(yàn)證傳入數(shù)據(jù)是否有效。當(dāng)向 props 傳入無(wú)效數(shù)據(jù)時(shí)，JavaScript 控制臺(tái)會(huì)拋出警告。

實(shí)例：判斷組件屬性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 使用數(shù)字變量，控制臺(tái)會(huì)出現(xiàn)以下錯(cuò)誤信息：
Warning: Failed prop type: Invalid prop `title` of type `number` supplied to `HelloMessage`, expected `string`.
PropTypes屬性值 
.propTypes = {
    // 可以聲明 prop 為指定的 JS 基本數(shù)據(jù)類型，默認(rèn)情況，這些數(shù)據(jù)是可選的
    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,

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

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

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

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

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

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

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

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

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

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

    // 自定義驗(yàn)證器。如果驗(yàn)證失敗需要返回一個(gè) Error 對(duì)象。不要直接使用 `console.warn` 或拋異常，因?yàn)檫@樣 `oneOfType` 會(huì)失效。
    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區(qū)別

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

以下實(shí)例演示了如何在應(yīng)用中組合使用state和props。我們可以在父組件中設(shè)置state，并通過(guò)在子組件上使用props將其傳遞到子組件上。在render函數(shù)中,我們?cè)O(shè)置name和site來(lái)獲取父組件傳遞過(guò)來(lái)的數(shù)據(jù)。

實(shí)例：鏈接 
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

在本章節(jié)中我們將討論 React 組件 API。

基礎(chǔ)語(yǔ)法 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(){}
}

實(shí)例：點(diǎn)擊次數(shù) 
class Counter extends React.Component{
    constructor(){
        super();
        this.state = {
            clickCount: 0
        };
    }
    handleClick(){
        this.setState({
            clickCount: this.state.clickCount +1
        });
    }
    render(){
        return 
點(diǎn)我！點(diǎn)擊次數(shù)為: {this.state.clickCount}
;
    }
}
ReactDOM.render(,mountNode);

React 組件生命周期 
組件的生命周期可分成三個(gè)狀態(tài)：Mounting、Updating、Unmounting
Mounting：已插入真實(shí) DOM constructor() componentWillMount()

在渲染前調(diào)用,在客戶端也在服務(wù)端。

render()

在渲染時(shí)調(diào)用

componentDidMount()

在第一次渲染后調(diào)用，只在客戶端。之后組件已經(jīng)生成了對(duì)應(yīng)的DOM結(jié)構(gòu)，可以通過(guò)this.getDOMNode()來(lái)進(jìn)行訪問。
如果你想和其他JavaScript框架一起使用，可以在這個(gè)方法中調(diào)用setTimeout, setInterval或者發(fā)送AJAX請(qǐng)求等操作(防止異部操作阻塞UI)。

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

在組件接收到一個(gè)新的prop時(shí)被調(diào)用。這個(gè)方法在初始化render時(shí)不會(huì)被調(diào)用。

shouldComponentUpdate()

返回一個(gè)布爾值。在組件接收到新的props或者state時(shí)被調(diào)用。在初始化時(shí)或者使用forceUpdate時(shí)不被調(diào)用。
可以在你確認(rèn)不需要更新組件時(shí)使用。

componentWillUpdate()

在組件接收到新的props或者state但還沒有render時(shí)被調(diào)用。在初始化時(shí)不會(huì)被調(diào)用。

render() componentDidUpdate()

在組件完成更新后立即調(diào)用。在初始化時(shí)不會(huì)被調(diào)用。

Unmounting：已移出真實(shí) DOM componentWillUnmount()

在組件從 DOM 中移除的時(shí)候立刻被調(diào)用。

實(shí)例：定時(shí)器，每隔100毫秒重新設(shè)置組件的透明度，并重新渲染 
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);
實(shí)例：點(diǎn)擊效果

以下實(shí)例初始化 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(
實(shí)例：統(tǒng)計(jì)時(shí)間 
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 允許在模板中插入數(shù)組，數(shù)組會(huì)自動(dòng)展開所有成員：

const arr = [
    
菜鳥教程
,
    
學(xué)的不僅是技術(shù)，更是夢(mèng)想！
,
];
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

    方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素

    Array.every Array.push Handling Events綁定事件 Forms表單 基礎(chǔ)語(yǔ)法 實(shí)例：輸入文字實(shí)時(shí)顯示 
    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);
    實(shí)例：輸入文字實(shí)時(shí)顯示

    你需要在父組件通過(guò)創(chuàng)建事件句柄 (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);
    實(shí)例：點(diǎn)我 
    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);

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

    實(shí)例：點(diǎn)我 
    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 ，你可以用來(lái)綁定到 render() 輸出的任何組件上。
    這個(gè)特殊的屬性允許你引用 render() 返回的相應(yīng)的支撐實(shí)例（ backing instance ）。這樣就可以確保在任何時(shí)間總是拿到正確的實(shí)例。

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

    在其它代碼中，通過(guò) this.refs 獲取支撐實(shí)例:

    

var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();
    實(shí)例：點(diǎn)我輸入框獲取焦點(diǎn) 
    class MyComponent extends React.Component{
    handleClick(){
        this.refs.myInput.focus();
    }
    render(){
        return(
            
    
                
                
            
    
        );
    }
}
ReactDOM.render(,mountNode);

    當(dāng)組件插入到 DOM 后，ref屬性添加一個(gè)組件的引用于到this.refs.name獲取。

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

    React AJAX

    React 組件的數(shù)據(jù)可以通過(guò) componentDidMount 方法中的 Ajax 來(lái)獲取，當(dāng)從服務(wù)端獲取數(shù)據(jù)庫(kù)可以將數(shù)據(jù)存儲(chǔ)在 state 中，再用 this.setState 方法重新渲染 UI。
    當(dāng)使用異步加載數(shù)據(jù)時(shí)，在組件卸載前使用 componentWillUnmount 來(lái)取消未完成的請(qǐng)求。

    實(shí)例 
    $.get(URL,function(data){})
    實(shí)例：獲取 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);
    實(shí)例：拉取數(shù)據(jù) 
    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圖表組件庫(kù)

    bootstrap

    React組件庫(kù)

    MarkdownEditor

    MarkDown

    ReactDOM render() 
    ReactDOM.render(
    element,
    container,
    [callback]
)
    unmountComponentAtNode() 
    ReactDOM.unmountComponentAtNode(container)
    findDOMNode() 
    ReactDOM.findDOMNode(component)
    onkeypress

    /* 在實(shí)例中，我們使用了支持多瀏覽器的方法，因?yàn)?keyCode 屬性無(wú)法再 Firefox 瀏覽器中工作。但是 which 屬性可以。
    如果瀏覽器支持 event.which 則使用 event.which，否則使用 event.keyCode */

    ES6

    ECMAScript 6 入門

    let

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

    for循環(huán)的計(jì)數(shù)器
    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，聲明的變量?jī)H在塊級(jí)作用域內(nèi)有效，最后輸出的是6
    var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

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

    轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/81892.html

    相關(guān)文章

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

      摘要：前言的基本概念組件的構(gòu)建方法以及高級(jí)用法這背后的一切如何運(yùn)轉(zhuǎn)深入內(nèi)部的實(shí)現(xiàn)機(jī)制和原理初探源碼代碼組織結(jié)構(gòu)包含一系列的工具方法插件包含一系列同構(gòu)方法包含一些公用或常用方法如等包含一些測(cè)試方法等包含一些邊界錯(cuò)誤的測(cè)試用例是代碼的核心部分它包含了 前言 React的基本概念,API,組件的構(gòu)建方法以及高級(jí)用法,這背后的一切如何運(yùn)轉(zhuǎn),深入Virtual DOM內(nèi)部的實(shí)現(xiàn)機(jī)制和原理. 初探Rea...

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

    • React 初探

      摘要：各個(gè)組件維護(hù)自己的狀態(tài)和，當(dāng)狀態(tài)變更，自動(dòng)重新渲染整個(gè)組件。形式的定義的組件是以的形式來(lái)創(chuàng)建的組件的，是目前極為推薦的創(chuàng)建有狀態(tài)組件的方式，最終會(huì)取代形式相對(duì)于可以更好實(shí)現(xiàn)代碼復(fù)用。組件名稱首字母必須大寫。變量名用包裹，且不能加雙引號(hào)。 目前在前端開發(fā)領(lǐng)域，框架Angular、react和vue占據(jù)著主流的地位而且可能會(huì)持續(xù)比較長(zhǎng)的一段時(shí)間。三門框架中，從數(shù)據(jù)綁定機(jī)制來(lái)看，vue和an...

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

    • React 初探

      摘要：各個(gè)組件維護(hù)自己的狀態(tài)和，當(dāng)狀態(tài)變更，自動(dòng)重新渲染整個(gè)組件。形式的定義的組件是以的形式來(lái)創(chuàng)建的組件的，是目前極為推薦的創(chuàng)建有狀態(tài)組件的方式，最終會(huì)取代形式相對(duì)于可以更好實(shí)現(xiàn)代碼復(fù)用。組件名稱首字母必須大寫。變量名用包裹，且不能加雙引號(hào)。 目前在前端開發(fā)領(lǐng)域，框架Angular、react和vue占據(jù)著主流的地位而且可能會(huì)持續(xù)比較長(zhǎng)的一段時(shí)間。三門框架中，從數(shù)據(jù)綁定機(jī)制來(lái)看，vue和an...

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

    • react-redux初探理解

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

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

    • 初探react技術(shù)棧（一）

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

      劉玉平 評(píng)論0 收藏0

    • 初探React技術(shù)棧（一）

      react 最近已經(jīng)開始使用react技術(shù)棧了，從頭開始搭建項(xiàng)目，有必要的記錄一下配置的過(guò)程以及項(xiàng)目分層的思路，這次后臺(tái)項(xiàng)目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語(yǔ)言react-intl create-react-app 這是官方維護(hù)的腳手架應(yīng)用 我們一般也采用這個(gè) $ npm or cnpm $ npm install create-react...

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

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

    0條評(píng)論

    張金寶

    男|高級(jí)講師

    TA的文章

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