React 语法
1、JavaScript XML
JSX = JavaScript XML，是一个看起来很像 XML 的 JavaScript 语法扩展。
JSX 不是模板，是JS语法本身，有更多的扩展。
JSX 组件一般以大写字母开头。
JSX 属性名称采用驼峰式。
JSX 属性值接受一个函数，而不是字符串。
JSX return false; 不会阻止组件的默认行为，需要调用 e.preventDefault();
2、React.Component 组件，ES6写法
class MyComponent extends React.Component{
render(){
return <div>Customer Component:{this.props.name}</div>
}
}
React.render(<MyComponent name="Hello World"/>, document.getElementById("root"))
3、 React.createElement ，创建元素
语法：React.createElement(type,[props],[...children])
创建一个react元素；第一个参数为模板标签名称，第二个参数为模板的props，第三个参数为模板文本内容
1），document.createElement，JavaScript原生方法
const h1 = document.createElement('h1');
h1.className='title';
h1.innerText='Hello World';
document.getElementById('example').appendChild(h1);
2、React.createElement，使用对象属性
const h1 = React.createElement("h1", {className: "title"}, "Hello World");
ReactDOM.render(h1, document.getElementById('example'));
3、使用React表达式，()
ReactDOM.render((<h1 className="title">Hello World</h1>), document.getElementById("example"));
4、React.createClass 创建模板，备注：废除
5、ReactDOM.render 元素渲染
ReactDOM.render 用于将模板转为HTML语言，并插入指定的DOM节点。
语法：ReactDOM.render(element, container, [callback])
该方法接收两个参数：第一个是创建的模板，第二个是目标元素
const element = <h1>Hello World</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
6、标签都需要有闭合
<img /> <p>Hello world<p>
7、class命名，需要className
<input className='header' maxLength="255" />
8、在jsx里写多个标签可以用括号包起来(必须要有一个根元素)
var Header = (<div>
<p>hello</p>
<p>world</p>
</div>)
9、Javascript表达式，使用{}标识内部是JS表达式
JSX是HTML和JavaScript混写的语法，当遇到<，JSX就当HTML解析，遇到{就当Javascript解析
var a = 'hello world';
let b = <div>{a}</div>
10、style 属性
style属性是用两个 { 包含的，最外层的 { 表示内部是一个JS表达式，里面的 { 表示是一个JS对象字面量
<div style = {{'background':'red'}}>hello world</div>
11、事件绑定属性的命名采用驼峰式写法，而不是小写
<button onClick={handle}> hello world</button>
12、href={}，及href内部需要使用单引号
<a href={'show.html?id=' + this.state.id}>hello world</a>
13、props 与 state 的区别
props 是组件对外的接口，state 是组件对内的接口 state是可变的，是一组用于反映组件UI变化的状态集合； props对于使用它的组件来说，是只读的，要想修改props，只能通过该组件的父组件修改； props的使用
<Hello data={id:0} />
state的使用
this.setState({id: 0});
this.setState((prevState, props) => ({ id: props.id }));
14、注释 (Comments)
1）单行注释，用 {}
{/* 单行注释 */}
2）多行注释，用 /**/
/* 多 行 注 释 */
3）行尾注释，用 //
var name = "Hello World"; //行尾注释
15、HTML转义
React 默认会转义所有字符串，使用 __html 进行转义
var content='<strong>Hello World</strong>';
React.render(
<div>{{__html:content}}</div>,
document.body
);
显示 state html 内容
{<div dangerouslySetInnerHTML={{ __html: this.state.data.content }} /> }
16、MAP循环
React通过循环遍历出生成的组件集合，在循环时一定要加上key值
{arr.map(function(it,i) {
return <span key={i}> {it} </span>
})}
17、Loop循环
var rows = [];
for (var i=0; i < numrows; i++) {
rows.push(<ObjectRow key={i}/>);
}
render(){
return (<tbody>{rows}</tbody>);
}
18、IF-ELSE
在JSX中是不可以直接在{}中加入if-else的
- 使用 三元操作符 来替代 if-else，或者将复杂的操作在JSX外面使用JS去处理
- 使用闭包自执行函数
class Hello extends React.Component { render (){ return( <div> { this.props.loggedIn ? <span> <h2>{ this.props.name }</h2> <p>Hello World</p> </span> : <h2>Hello Message</h2> } </div> ) } }
19、Switch-Case
return (
<section>
<h1>Color</h1>
<h3>Name</h3>
<p>{this.state.color || "white"}</p>
<h3>Hex</h3>
<p>
{(() => {
switch (this.state.color) {
case "red": return "#FF0000";
case "green": return "#00FF00";
case "blue": return "#0000FF";
default: return "#FFFFFF";
}
})()}
</p>
</section>
);
20、返回数组
const arr = ['Hello', 'World'];
const Arr = () => {
return arr.map((item, index) => {
return <p key={index}>{item}</p>
})
}
ReactDOM.render(<Arr />, document.getElementById('root'));
21、表单
this.setState({
[e.target.name]: e.target.value
})
表单示例：
<script type="text/jsx">
class MyForm extends React.Component {
constructor(props){
super(props);
this.state = {
sex:0,
age:1
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e){
this.setState({
[e.target.name] : e.target.value
});
}
handleSubmit(e){
e.preventDefault();
var arr = [];
for (var item in this.state){
arr.push(item + '=' + this.state[item]);
}
result.innerText = arr.join();
}
render(){
return(
<form onSubmit={this.handleSubmit}>
<p>性别：<input type='text' name="sex" onChange={this.handleChange} value={this.state.sex} /></p>
<p>年龄：<input type='text' name="age" onChange={this.handleChange} value={this.state.age} /></p>
<p><input type='submit' value='submit' /></p>
<p>表单值：<span id="result"></span></p>
</form>
)
}
}
ReactDOM.render(
<MyForm />,
document.body.appendChild(document.createElement('div'))
);
</script>
22、表格
<tr>必须为<tbody>的子级
<table> <tbody> <tr> <td>Hello World</td> </tr> </tbody> </table>
23、多个组件
{/*定义函数*/}
const Hello = (props) => {
return (
<div>
<h1>{props.name}</h1>
</div>
)
}
{/*定义组件*/}
class Form1 extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Hello name={this.props.name} />
);
}
}
{/*元素渲染*/}
ReactDOM.render(
<Form1 name="Hello World" />,
document.getElementById('form1')
);
一个简单的无状态组件，只受属性控制
const Button = props => (
<button onClick={props.onClick}>
{props.text}
</button>
);
调用上面Button组件
<Button onClick={this.handleClick} text="Hello World" />
容器组件 X 展示组件
const List = props =>
<ul>
{props.data.map(d => (
<li>{d.title}</li>
))}
</ul>
调用上面Button组件
<List data={this.state.data} />
