React 基礎編寫

時間 2019-11-12

標籤 react 基礎編寫欄目 React 简体版

原文原文鏈接

react基礎

總體結構（與通常html不一樣的）html

1.react模塊引入head中

<script src="../react.js"></script><!--react核心組件-->
<script src="../react-dom.js"></script><!--react操做dom-->
<script src="../browser.min.js"></script><!--將jsx語法轉化成js-->

2.JSX，react基於JSX語法

script標籤須要加type="text/babel",用於寫JSX語法react

3.如何渲染dom

<body>

<div class="example" id="example"></div>

<script type="text/babel">
ReactDOM.render( //render方法渲染
   <MyComponent />,//組件
   document.getElementById('example'))
</script>

</body>

如何寫組件，組件demos

(1).遍歷組件

//組件，首字母大寫，用於輸出組件類，返回的只能包含一個頂級標籤
let PreList = React.createClass({///createClass用於生成組件類，
    render : function () {//必定有一個render方法
        //arr預設key值，作diff
        let arr1 = [<h1 key="1">hello</h1>,<h1 key="2">bob</h1>,<h1 key="3">how are you?</h1>];//須要預設key，作diff對比時候用，要不報錯
        const arr2 = [1,2,3];
        //{}代碼塊，寫js,<>寫html標籤
        return <div>
                  <div>
                      {arr1.map(function (val) {
                          return val;
                      })}
                  </div>
                  <ul>
                      {arr2.map(function (val,index) {  
                          return <li key={index}>{val}</li>;//key值須要設，要不報錯
                      })}
                  </ul>
                </div>
    }
});

(2).點擊事件組件

let Button = React.createClass({
    getDefaultProps:function () {//默認屬性
      return {name : 'click me'};
    },
    propTypes : {//屬性，驗證組件實例的屬性是否符合要求
        name : React.PropTypes.string.isRequired
    },
    loginClick :function () {
        alert('點擊生效')
    },
    render:function () {//onClick={this.loginClick},用括號包裹
        return <div>
            <button onClick={this.loginClick}>{this.props.name}</button>
        </div>//this指的組件
    }
});

(3).獲取真實dom的輸入

let RealDom = React.createClass({
        loginClick :function () {//click事件確保用戶點擊了真實dom，才觸發ref讀取
            this.refs.pwd.focus();//this.refs獲取真實dom,有時候須要獲取用戶的輸入，就須要真實的dom才能拿到
            alert(this.refs.pwd.value);
        },
        render:function () {
            return <div>
                <input type="text" ref="pwd" name="pwd" title="pwd"/>
                <button onClick={this.loginClick}>{this.props.name}</button>
            </div>//this指的組件
        }
    });

(4).input變化監聽

let InputChange = React.createClass({
        getInitialState : function (){
            return {
                value : 'hello!' //用戶填入表單中的屬性屬於可變，不能用props
            }
        },
        changeInput:function (e) {
            this.setState({value : e.target.value})
        },
        render :function () {
            //onChange={this.changeInput}回調，用來讀取用戶輸入的值，input/textarea/select/radio都是
            return <div>
                <input title="name" value={this.state.value} onChange={this.changeInput}/>
                <p>{this.state.value}</p>
            </div>
        }
    })

(5).帶子節點的組件，處理

let Child = React.createClass({
    render : function () {
        //this.props.children,表示組件全部子節點,三種可能（undefined--沒有，object--一個子節點，array--多個子節點）
        //React.Children來處理this.props.children;
        //React.Children.map遍歷子節點，就不用擔憂this.props.children的數據類型
        return <ul>
            {React.Children.map(this.props.children,function (child) {
                return <li>{child}</li>
            })}
        </ul>
    }
});

(6).狀態值變化

this.props：屬性，最開始定義好就再也不變化
this.state：會隨着用戶的變化而變化的狀態值babel

let LikeButton = React.createClass({
        getDefaultProps:function () {
            return { bgColor : 'yellow'}
        },
        getInitialState : function (){//默認狀態值設置
          return {
              like : false,
          }
        },
        changeLike : function () {
            this.setState({//修改狀態值，每次狀態值的修改，帶動render的從新自動渲染
                like : !this.state.like
            })
        },
        render :function () {
            var text = this.state.like? "like":"don't like";
            //{{background:this.props.bgColor}} ,方式設置樣式，React 組件樣式是一個對象，第一個{}表明這是js語法，第二個{}表明是樣式對象
            return <div>
                <button onClick={this.changeLike} style={{background:this.props.bgColor}}>{text}</button>
            </div>
        }
    });

組件總控制器，包含組件的生命週期使用

/*總的組件控制器，集合*/
    let MyComponent = React.createClass({
        //組件的生命週期，三種,will函數在以前調用，did在以後調用
        /**componentWillMount()
         componentDidMount()
         componentWillUpdate(object nextProps, object nextState)
         componentDidUpdate(object prevProps, object prevState)
         componentWillUnmount()
         componentWillReceiveProps(object nextProps)：已加載組件收到新的參數時調用
         shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否從新渲染時調用*/
        componentWillMount:function () {
            //插入真實dom前，
            alert('dom not ok')
        },
        componentDidMount:function () {
            //插入真實dom後，
            alert('dom ok')
        },
        render :function () {
            //若是不須要子節點，能夠不用謝閉合雙標籤，這樣<PreList/>就好
            ////關於屬性：class 屬性須要寫成 className ,for 屬性須要寫成 htmlFor ，這是由於 class 和 for 是 JavaScript 的保留字。
            return <div>
                        <Button className="btn"/>
                        <RealDom name="點擊"/>
                        <PreList/>
                        <Child>
                            <span>test child1</span>
                            <span>test child2</span>
                        </Child>
                        <LikeButton />
                        <InputChange />
                    </div>
    }
    });

參考

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。