react 簡單實用小知識點

一：React的生命周期

1.1組件生命周期的三種狀態(tài)展示：
  • Mounting: 已插入了真實dom結(jié)構(gòu)
  • Updating: 正在被重新渲染
  • Unmounting: 已移出了真實dom結(jié)構(gòu)
1. 2關(guān)于 生命周期的處理函數(shù)（will表示進入狀態(tài)之前調(diào)用，did表示進入狀態(tài)之后調(diào)用）
  • componentWillMount() 組件將要渲染到真實dom節(jié)點；
  • componentDidMount() 組件已經(jīng)渲染到真實dom節(jié)點；
  • componentWillUpdate() state值發(fā)生變化，組件將要被重新渲染；
  • componentDidUpdate() 組件已經(jīng)完成重新渲染；
  • componentDidUpdate() 組件已經(jīng)完成重新渲染；
  • componentWillUnmout() 卸載組件，比如跳轉(zhuǎn)路由的時候；
  • componentWillReceiveProps() 已經(jīng)加載組件props發(fā)生改變的時候調(diào)用；
  • shouldComponentUpdate() 組件判斷是否要重新渲染的時候調(diào)用；
1.3 關(guān)于組件生命周期的執(zhí)行順序 如下圖所示：

二：查找dom節(jié)點操作（ref）

1 react中通過ref給dom節(jié)點加上一個名字，然后我們通過this.refs.ref名 來獲取
eg:

render(){
    return (
        <div ref = "demo">this is a test</div>
    )
}

如上面代碼所示我們在需要的獲取這個div標簽的時候就可以通過this.refs.demo來進行一系列的操作了，就和原生javascript中通過document.getElementById獲取到的是一樣的道理；

三：受控表單組件

1.在受控表單組件中的value值都要與state屬性進行綁定，并且需要通過onChange方法去改變值；
eg:

export default class Demo extends React.Component{
            constructor(props){
                super(props)
                this.state = {
                    testInput: ''
                }
            }

            handleInput = (e) => {
                let str = ''
                if(e.target.value.length >= 8){
                    str = e.target.value.splice(0,5) + '...'
                }
                this.setState({
                    testInput: str
                })
            }

            render(){
                return (
                    <div>
                        <input type="text" value={ this.state.testInput } onChange={ this.handleInput }>
                    </div>
                )
            }
        }

四： 關(guān)于屬性校驗

static: propTypes = {
     userName: React.PropTypes.bool.isRequired, //表示是必填項且是布爾類型
     passWord: React.PropTypes.number //表示必須是數(shù)值類型
}

更多關(guān)于屬性校驗的方法…

五： 關(guān)于props

組件中的props主要實現(xiàn)的是父組件向子組件傳遞數(shù)據(jù)

如下demo所示

DemoTest.js

import React,{Component} from 'react'
import Test from './Test.js'

export default class Demo extends Component{
    constructor(props){
        super(props)
        this.state={

        }
    }

    render(){
        return(
            <div>
                <Test wenzi="按鈕"/>
                <div>內(nèi)容</div>
            </div>
        )
    }
}

Test.js

import React,{Component} from 'react'

export default class Demo extends Component{
    constructor(props){
        super(props)
        this.state={

        }
    }

    render(){
        return(
            <input type="button" value={ this.props.wenzi }/>
        )
    }
}

Test組件就能夠接收到DemoTest組件中傳進去的wenzi值了

六： 子孫級別數(shù)據(jù)屬性傳遞（context）

說明： 如果我們利用props也是可以實現(xiàn)這個效果的，但是那樣的話，無疑比較麻煩，下方代碼是通過context實現(xiàn)的

import React,{Component} from 'react'


class Child extends Component{
    constructor(props){
        super(props)
        this.state={

        }
    }

    static contextTypes = {
        wenzi: React.PropTypes.string
    }

    render(){
        return(
            <div>
                <input type="button" value={ this.context.wenzi }/>
            </div>
        )
    }
}

class Son extends Component{
    constructor(props){
        super(props)
        this.state={

        }
    }

    render(){
        return(
            <div>
                <Child />
            </div>
        )
    }
}


export default class Parent extends Component{
    constructor(props){
        super(props)
        this.state={

        }
    }

    getChildContext = () => {
        return{
            wenzi: '測試按鈕'
        }
    }

    static childContextTypes = {
        wenzi: React.PropTypes.string
    }

    render(){
        return(
            <div>
                <Son />
            </div>
        )
    }
}

七： react中添加動畫(react-addons-css-transition-group)

react-addons-css-transition-group這個組件只是提供了內(nèi)容顯示隱藏的動畫功能；
基本使用：
1.安裝－>import入
2.想讓哪一部分有顯示隱藏動畫，就用該組件包裹起來

<ReactCSSTransitionGroup
    transitionName="example"
    transitionAppear={true}
    transitionEnterTimeout={500}
    transitionLeaveTimeout={300}
>
{ items }
</ReactCSSTransitionGroup>

根據(jù)指定的transitionName值從而去設置一些顯示隱藏的css樣式

.example-enter{ 
//此處填寫的是進入的樣式 
eg: opacity: 0;
}

.example-enter.example-enter-active{ 
//此處填寫的是進入結(jié)束的樣式 
eg: opacity: 1;
    transition: opacity 500ms ease-in;
}

.example-leave{ 
//此處填寫的是離開的樣式 
eg: opacity: 1;
}

.example-leave.example-leave-active{ 
//此處填寫的是離開結(jié)束的樣式 
eg: opacity: 0;
    transition: opacity 500ms ease-in;
}

//注意： 下方初始化的狀態(tài)還要結(jié)合transitionAppear={true}為true才可以

.example-appear{
    //初始化時候的狀態(tài)
    opacity: 0;
} 

.example-appear.example-appear-active{ 
//初始化結(jié)束時候的狀態(tài)
eg: opacity: 1;
    transition: opacity 500ms ease-in;
}

點擊查看更多信息…

八： react中的路由（react-router）

基本使用代碼記錄：

//首先是引入
import { Route,Router,browserHistory } from 'react-router'
render(){
    return(
        //這里使用了browserHistory優(yōu)化了路徑，路徑上就不會有＃了
        <Router history={browserHistory}>
            <Route path="/" compontent={ AppContainer }>
                //指定默認情況下加載的子組件
                <IndexRoute component={ HomeContainer }/>
                <Route path="home" component={ HomeContainer } />
                <Route path="about" component={ AboutContainer } />
                <Route path="list" component={ ListContainer }>
                    <Route path="detail" component={ DetailContainer }/>
                </Route>
            </Route>
        </Router>
    )
}

注： 關(guān)于browserHistory與hashHistory的區(qū)別
1.browserHistory在低版本瀏覽器不支持，但是hashHistory支持
2.使用browserHistory，直接復制鏈接在一個新的頁面粘貼訪問時無法訪問的，但是hashHistory可以
3.使用browserHistory那么在地址欄上不會出現(xiàn)＃,而使用hashHistory會出現(xiàn)＃號
4.使用browserHistory組件在執(zhí)行的時候只執(zhí)行一次，而使用hashHistory會執(zhí)行兩次，這樣的話，對于一些生命周期函數(shù)的操作可能會出現(xiàn)問題
更多關(guān)于react-router的知識點，點擊查看阮一峰老師的博文…
==>
前提： 配合webpack一起
實現(xiàn)按需加載：即實現(xiàn)除了首頁需要的組件以外，其他的組件都是訪問了才加載。。。
代碼實現(xiàn)就是將之前寫好的路由里的component改寫下：下面就列舉about這一個

import { Route,Router,browserHistory } from 'react-router'
render(){
    return(
        //這里使用了browserHistory優(yōu)化了路徑，路徑上就不會有＃了
        <Router history={browserHistory}>
            <Route path="/" compontent={ AppContainer }>
                //指定默認情況下加載的子組件
                <IndexRoute component={ HomeContainer }/>
                <Route path="home" getComponent={ 
                    (nextState,callback) => {
                        require.ensure([],(require) => {
                            callback(null,require('組件路徑地址').default)
                        },"自定義一個名字")
                    }
                }
                 />
                <Route path="list" component={ ListContainer }>
                    <Route path="detail" component={ DetailContainer }/>
                </Route>
            </Route>
        </Router>
    )
}

了解更多關(guān)于按需加載～

九： fetch請求服務

關(guān)于fetch
如果要用到jsonp的話，安裝fetch-jsonp

十： 獲取路徑參數(shù)和查詢字符串

路徑參數(shù)：

this.props.params.參數(shù)名

查詢字符串：

this.props.location.query.參數(shù)名
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容