react入門

react+react-router+antd 栗子：https://github.com/Aquarius1993/reactApp

應用場景：

1.複雜場景下的高性能

2.重用組件庫，組件組合

3.懶

 

庫

　　react.main.js react的核心庫

　　react-dom.js 與dom相關的功能

 　  browser.main.js 用於將jsx語法轉化爲js語法

 

組件生命週期：

　狀態:

　　Mounting：已插入真實DOM

　　Updating：正在被從新渲染

　　UnMounting：已移除真實DOM

   方法：

　　componentWillMount 在渲染前調用，在客戶端也在服務端

　　componentDidMount 在第一次渲染後調用，只在客戶端。以後組件已經生成了對於的DOM結構，能夠經過this.getDOMNode()來進行訪問。

　　componentWillReceiveProps 在組件接收到一個新的prop時被調用，初始化時不會被調用。

　　shouldComponentUpdate 返回布爾值，在組件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用。

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

　　componentDidUpdate 在組件完成更新後當即調用。在初始化時不會被調用。

　　 componentWillUnmount 在組件從DOM中移除時當即被調用。

 

添加樣式：
　　 添加類名，給類名添加樣式 注意：class在es6中是關鍵字，得寫成className
　　 行內樣式，style={{color:'red'}}或者style={obj},obj是定義的對象形式的變量

 　　

　　　　css: 

　　　　　　.divbox {
　　　　　　　　font-size: 24px;
　　　　　　}

　　　　js:
　　
　　　　var Hello  = React.createClass({
    		render: function() {
    			var obj = {color: 'red'};
    			return <div className="divbox" style={obj}>Hello {this.props.name}</div>;
    		}
    	});
    	ReactDOM.render(<Hello name='world' />,document.getElementById('container'));

 

註釋

render:function(){
    return (
          {/*註釋*/}    
    )    
}

 

表達式

　　　　　　  return (
　　　　　　　　　<div>
<h4>計算：{1+1}</h4>
                    <h4>三元表達式：{1===1?'true':'false'}</h4>
                </div>

            );

 

數組

　　　　var arr = [
            <h4>數組元素1</h4>,
            <h4>數組元素2</h4>
        ]return (            
                <div style={{opacity: this.state.opacity}}>
                    {arr}                   
                </div>

            );

 

ref

經過給元素設置的ref獲取到dom結構

　　　　　　　　handleClick: function(event) {
                {/*
                        <!-- 經過 ref獲取到dom結構 -->
                */}
                
                var tipE = ReactDOM.findDOMNode(this.refs.tip);
                if(tipE.style.display == 'none') {
                    tipE.style.display = 'inline';
                }else {
                    tipE.style.display = 'none';
                }
                {/*
                <!-- 阻止默認事件 -->
                */}
                
                event.stopPropagation();
                event.preventDefault();
            },
            render: function() {
                return (<div>
                    <button onClick={this.handleClick}>顯示|隱藏</button><span ref='tip'>測試點擊</span>
                </div>);
            }

注：代碼中嵌套多個html標籤時，須要使用一個div元素(section)包裹。

state

　　初始化：　　　

　　　　　　getInitialState: function() {
                alert('initial');
                return {
                    opacity: 1.0,
                    fontSize: '20px'
                };
            }

　　修改：

　　　　　　  componentDidMount: function() {
                alert('did');
                var _self = this;
                window.setTimeout(function(){

                    _self.setState({ opacity: 0.5,
                        fontSize: '40px' })
                },1000)
            }

 

渲染react組件

　　　　ReactDOM.render(<div>
            <ClickEvent/>
            <TestClickComponent/>
            <TestInputComponent/>
            <HelloMessage />
        </div>,document.getElementById('container'));

注：有多個組件時須要使用一個div元素包裹。

 

事件

　　　　　　changeHandeler: function(event) {
                event.stopPropagation();
                event.preventDefault();
                this.setState({
                    inputContent: event.target.value
                })
            },
            render: function() {
                return (
                    <div>
                        <input type="text" onChange={this.changeHandeler}/><span>{this.state.inputContent}</span>
                    </div>);    
            }

 

父子組件

　　子組件上使用表單  onChange 方法將觸發 state 的更新並將更新的值傳遞到子組件的輸入框的 value 上來從新渲染界面

　　　　//定義子組件
　　　　var Content = React.createClass({
            render: function() {
              return  <div>
                    <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /> 
                    <h4>{this.props.myDataProp}</h4>
                    </div>;
            }
        });
        var HelloMessage = React.createClass({
　　　　　　　//初始化state
            getInitialState: function() {
              return {value: 'Hello Runoob!'};
            },
　　　　　　　//改變state的值
            handleChange: function(event) {
              this.setState({value: event.target.value});
            },
            render: function() {
              var value = this.state.value;
              return <div>
　　　　　　　　　　　　{/*將state和change事件函數傳遞給子組件*/}
                    <Content myDataProp = {value} 
                        updateStateProp = {this.handleChange}></Content>
                    </div>;
            }
        });

 

 

　　

sublime的react插件：

Emmet:

　　自動擴展react的className

　配置：Preference -> Package Settings -> Emmet -> KeyBindingd-User貼上下面的代碼：  

　　

[{
    "keys": ["tab"],
    "command": "expand_abbreviation_by_tab",
 
    // put comma-separated syntax selectors for which 
    // you want to expandEmmet abbreviations into "operand" key 
    // instead of SCOPE_SELECTOR.
    // Examples: source.js, text.html - source
    "context": [{
            "operand": "source.js",
            "operator": "equal",
            "match_all": true,
            "key": "selector"
        },
 
        // run only if there's no selected text
        {
            "match_all": true,
            "key": "selection_empty"
        },
 
        // don't work if there are active tabstops
        {
            "operator": "equal",
            "operand": false,
            "match_all": true,
            "key": "has_next_field"
        },
 
        // don't work if completion popup is visible and you
        // want to insert completion with Tab. If you want to
        // expand Emmet with Tab even if popup is visible -- 
        // remove this section
        {
            "operand": false,
            "operator": "equal",
            "match_all": true,
            "key": "auto_complete_visible"
        }, {
            "match_all": true,
            "key": "is_abbreviation"
        }
    ]
}]

    babel: 支持ES6、.jsx代碼語法高亮

    jsformat: 

　　js格式化，經過修改它的e4x屬性能夠使它支持jsx。  

　　配置：Preference -> Package Settings -> JsFormat -> Settings-User貼上下面的代碼：

 

 {
  "e4x": true,
  // jsformat options
  "format_on_save": true,
}

 

快速生成react項目：

安裝腳手架

首先確保本身安裝了nodejs，而後全局安裝yeoman

npm install -g yo

 而後直接安裝腳手架 

npm install -g generator-react-package

建立React項目

新建一個文件夾，在文件夾下運行：

yo react-webapck

　　而後就會在此目錄下生成如下目錄結構