React练习笔记

reprintemps 2020-07-11

语法分析:

标签属性需要遵循规则 : 毕竟是替你转译，所以并不是真的在写标签;
- 涉及JSX语法的部分，浏览器无法识别，必须转译，所以<script type='text/babel' />;
- class => className;
- onclick => onClick;
- JSX里的js部分用表达式 : {/*js部分(变量|方法|..)*/};
要件:
- render()方法 : 该组件被使用时，调用渲染函数;
  - return : render()的返回值里是具体渲染的内容;
  - *也可以自定义方法用来渲染，但是需要手动调用(使用<Tag />时默认调用该组件render());
- ReactDOM.render( 0:渲染的组件, 1:追加到哪个容器 );
- this.props.* :
  - this : 该组件(或者说实际上是该组件的数据模型(即虚拟DOM？));
  - .props : 该组件的属性(参考JQuery的 prop : @0);

依赖：

react
react-dom
babel

代码示例

        class Square extends React.Component{
            render(){
                return(
                    <button className='square' onClick={()=>alert("click!")}>
                        {this.props.value}
                    </button>
                );
            }
        }
    
        class Board extends React.Component{
            renderSquare(i){
                return <Square value={i}/>;
            };
            
            render(){
                const status = 'Next player: x';
                
                return(
                    <div>
                        <div className='status'>{status}</div>
                        <div className='board-row'>
                            {this.renderSquare(0)}
                            {this.renderSquare(1)}
                            {this.renderSquare(2)}
                        </div>
                        <div className='board-row'>
                            {this.renderSquare(3)}
                            {this.renderSquare(4)}
                            {this.renderSquare(5)}
                        </div>
                        <div className='board-row'>
                            {this.renderSquare(6)}
                            {this.renderSquare(7)}
                            {this.renderSquare(8)}
                        </div>
                    </div>
                );
            };
        }
        
        class Game extends React.Component{
            render(){
                return(
                    <div className='game'>
                        <div className='game-board'>
                            <Board />
                        </div>
                        <div className='game-info'>
                            <div>{/*status*/}</div>
                            <ol>{/*todo*/}</ol>
                        </div>
                    </div>
                );
            }
        }
        
        ReactDOM.render(
            <Game />,
            document.getElementById("root")
        );