文章出處

react基礎小結

1. 例子

import React from 'react' 
import { render } from 'react-dom' 

// 定義組件 
class Hello extends React.Component { 
    render() {
         // return 里面寫jsx語法 
        return ( <p>hello world</p> ) 
    }
}

 // 渲染組件到頁面
render( <Hello/>, document.getElementById('root') )

import React from 'react'
這里的react對應的是./package.json文件中dependencies中的'react'，即在該目錄下用npm install安裝的 react 。npm 安裝的 react 的物理文件是存放在 ./node_modules/react中的，因此引用的東西肯定就在這個文件夾里面。

./node_modules/react/package.json中的"main": "react.js",，這里的main即指定了入口文件，即./node_modules/react/react.js這個文件

2. jsx語法
1）使用一個父節點包裹
jsx中不能一次性返回零散的多個節點，如果有多個則包含到一個節點中
如：

return (
    <div> 
        <p>段落1</p> 
        <p>段落2</p> 
        <p>段落3</p> 
    </div> 
)


3. 注釋
jsx中用{/**/}的注釋形式
如：

return(
    //jsx外的注釋
    <div>
        {/*jsx里面的注釋*/}
        <p>hello</p>
    </div>
)

4. 樣式

css樣式：

<p className="class1">hello</p>
<!--用className代替class*/

內聯樣式：

<p style={{color:'red',fontSize:'20px'}}>hello</p>
<!--注意{{}},和駝峰寫法-->

5. 事件

如：click

class Hello extends React.Component{
    render(){
        return (
            <p onClick={this.clickHandler.bind(this)}>hello</p>
        )
    }
    
    clickHandler(event){
        console.log('yes')
    }
}

注意：onClick駝峰寫法

6. 循環

7. 判斷

jsx中一般會用到三元表達式（表達式也是放在{}中的）

如：

return(
    <div>
        <p>段落1</p>
        {
            true
            ? <p> true </p>
            : <p> false </p>
            </div>
        }
    </div>
)

也可以這樣使用：

<p style={{display: true? 'block' ? 'none'}}> hello world</p>

8. 數據傳遞&數據變化

1） props

如果

<Header title="Hello頁面"/>

在Header組件中可以這樣取到

render(){
    return(
        <p>{this.props.title}</p>
    )
}

在react中，父組件給子組件傳遞數據時，就是以上的方式，通過給子組件設置props，子組件獲取props中的值便可完成數據傳遞。

2）props&state

如果組件內部自身的屬性發生變化

class Hello extends React.Component{
    constructor(props,context){
        super(props,context);
        this.state={
            //顯示當前時間
            now:Date.now()
        }
    }
    render(){
        return(
            <div>
                <p>hello world {this.state.now}</p>
            </div>
        )
     }
}

react會實時監聽每個組件的props和state值，一旦有變化，會立刻更新組件，將結果重新渲染到頁面上

var LikeButton = React.createClass({
        getInitialState: function (){
            return {liked : false};
        },
        handleClick: function (event) {
            this.setState({liked: !this.state.liked});
        },
        render: function(){
            var text = this.state.liked ? 'like' : 'haven\'t liked';                
            return (
                <p onClick={this.handleClick}>
                    you {text} this click to toggle
                </p>
            );
        }
    });