React练习笔记

reprintemps 2020-07-11

语法分析:

1. 标签属性需要遵循规则 : 毕竟是替你转译，所以并不是真的在写标签;

   • 涉及JSX语法的部分，浏览器无法识别，必须转译，所以<script type='text/babel' />;

   • class => className;

   • onclick => onClick;

   • JSX里的js部分用表达式 : {/*js部分(变量|方法|..)*/};

2. 要件:

   • render()方法 : 该组件被使用时，调用渲染函数;

     • return : render()的返回值里是具体渲染的内容;
     • *也可以自定义方法用来渲染，但是需要手动调用(使用<Tag />时默认调用该组件render());

   • ReactDOM.render( 0:渲染的组件, 1:追加到哪个容器 );

   • this.props.* :

     • this : 该组件(或者说实际上是该组件的数据模型(即虚拟DOM？));
     • .props : 该组件的属性(参考JQuery的 prop : @0);

依赖：

• react
• react-dom
• babel

代码示例

1		class Square extends React.Component{
2			render(){
3				return(
4					<button className='square' onClick={()=>alert("click!")}>
5						{this.props.value}
6					</button>
7				);
8			}
9		}
10	
11		class Board extends React.Component{
12			renderSquare(i){
13				return <Square value={i}/>;
14			};
15			
16			render(){
17				const status = 'Next player: x';
18				
19				return(
20					<div>
21						<div className='status'>{status}</div>
22						<div className='board-row'>
23							{this.renderSquare(0)}
24							{this.renderSquare(1)}
25							{this.renderSquare(2)}
26						</div>
27						<div className='board-row'>
28							{this.renderSquare(3)}
29							{this.renderSquare(4)}
30							{this.renderSquare(5)}
31						</div>
32						<div className='board-row'>
33							{this.renderSquare(6)}
34							{this.renderSquare(7)}
35							{this.renderSquare(8)}
36						</div>
37					</div>
38				);
39			};
40		}
41		
42		class Game extends React.Component{
43			render(){
44				return(
45					<div className='game'>
46						<div className='game-board'>
47							<Board />
48						</div>
49						<div className='game-info'>
50							<div>{/*status*/}</div>
51							<ol>{/*todo*/}</ol>
52						</div>
53					</div>
54				);
55			}
56		}
57		
58		ReactDOM.render(
59			<Game />,
60			document.getElementById("root")
61		);
62		
63

@0 : 顺便回忆一下：JQuery的prop是预置的属性,attr是自定义属性;可以这么说，但是好像prop也可以自定义一些属性，二者的区别在attr能拿到prop(理解为更松散标准的拿取),但是prop的属性随着控件动态改变会改变，而attr定义的同名属性是自定义所以自然不会.