###理解ReactDOM.render
ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点
1、此方法接受两个参数,中间用逗号隔开,第一个参数要么是
html块,要么是组件。直接写{} js代码是错误的。
2、有且只能有一个顶层标签,有两个平级的顶层标签会出错
###组件 React.createClass
var ComponentModel = React.createClass({
render:function(){ return ****; }
});
1、组件只能包含一个顶层标签,不能包含两个顶层标签,否则报错
2、组件属性名,避免和JavaScript的保留字冲突,class改成className,for改成hemlFor。(自己试验了下,不改也是ok的,奇怪了)
3、 React.createClass(),括号里,必须用‘{’大括号把render:function(){return *;}包裹起来
###this.props.children
this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点
这里比较有意思的是:
var NotesList = React.createClass({
render: function(){
return (
<div>
{
React.Children.map(this.props.children,function(child){
return <span>{child}</span>;
})
}
</div>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello 第一</span>
<span>world 第二</span>
</NotesList>,
document.getElementById("container1")
);
其中:
return (
<div>
{
React.Children.map(this.props.children,function(child){
return <span>{child}</span>;
})
}
</div>
);
return后面跟的()后面必须是html标签。不能直接‘{’大括号。
###PropTypes
验证组件实例的属性是否符合要求
/*** 组件的属性定义验证 ***/
var MyTitle = React.createClass({
propTypes:{
title:React.PropTypes.number.isRequired,
},
render:function(){
return <span>{this.props.title}</span>;
}});
ReactDOM.render(
<MyTitle title={520.1314}/>,
document.getElementById("container")
);
1、propTypes: 第一个字母大小写都ok
2、function(){
return <span>{this.props.title}</span>;
}})必须有html标签括起来
3、title的值,string可以直接“字符串”,数字的话需要用大括号括起来"{520.1314}"
否则会报类似:Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.的错误
###状态state的改变
模板代码
var LinkedButton = React.createClass({
getInitialState:function(){
return ({liked : false});
}
,
handleClick: function(){
this.setState({liked: !this.state.liked});
}
,
render: function(){
var text = this.state.liked ? 'like':'haven\'t liked';
return (<p onClick={this.handleClick}>
You {text} this.Click to toggle.
</p>)
}
});
ReactDOM.render(
<LinkedButton />,
document.getElementById("container")
);
Reat 改变控件状态 state,属性props的话,一经定义,就改不了了,使用state状态的话可以改
###表单提交
文本输入框(input)中的内容(value),若想读取到的话,不能使用this.props.value读取,要定义一个onChange事件的回调函数,通过event.target.value读取用户输入的值,textarea元素、select元素、radio元素都属于这种情况。
1、创建组件时,value属性写法为={value},其中的value值要在此function中创建。
2、必须有onChange事件监听,去处理触发改变后的动作
3、触发改变的事件里,改变状态值的写法为:this.setState({value:event.target.value}),必须通过event.target.value去获取到事件的改变值。
4、getInitialState:function中,必须返回(return)一个值写法为:{value:’this is a init value.’};
/*** 做一个表单提交组件 ***/
var InputComponent = React.createClass({
getInitialState:function(){
return {value:'this is a init value.'};
}
,
handleTextChange:function(event){
console.log(event.target.value);
this.setState({value:event.target.value});
}
,
render: function(){
var value = this.state.value;
return (<div>
<input type="text" name="inputComponent" value={value} onChange={this.handleTextChange} />
<p>{value}</p>
</div>);
}
});
ReactDOM.render(
<InputComponent />
,
document.getElementById("container")
);
###生命周期
组件的生命周期分成三个状态:
- Mount:已插入真实 DOM
- Updat:正在被重新渲染
- Unmount:已移出真实 DOM
/*** 组件的生命周期练习 ***/
var LifeCycleComponent = React.createClass({
getInitialState:function(){
return { opacity: 1.0};
}
,
componentWillMount:function(){
/**只会调用一次,相当于onCreate()**/
console.log("渲染前...."+new Date().getMilliseconds());
}
,
componentDidMount:function(){
/**只会调用一次,一次性的onResume()方法 **/
console.log("渲染完成"+new Date().getMilliseconds());
setInterval(function(){
var mOpacity = this.state.opacity;
mOpacity -= 0.05;
if(mOpacity < 0.1){
mOpacity = 1.0;
}
this.setState({opacity:mOpacity})
}.bind(this),100);
}
,
componentWillUpdate:function(){
/**可重复调用,相当于reStart()**/
console.log("将要重新渲染...."+new Date().getMilliseconds());
}
,
componentDidUpdate:function(){
/**可重复调用,相当于reStart()后的onResume**/
console.log("重新渲染完成"+new Date().getMilliseconds());
}
,
componentWillUnmount:function(){
console.log("移出真实DOM"+new Date().getMilliseconds());
}
,
render: function(){
return (<div style={{opacity:this.state.opacity}}>
<p>Hello {this.props.name}!</p>
</div>);
}
});
ReactDOM.render(
<LifeCycleComponent name="World"/>
,
document.getElementById("container")
);
怎么理解生命周期里需要bind()及其bind在this参数的这个this的意义。
###Ajax嵌入使用
使用过程中需要注意的地方:
1、首先需要导入jquery.js
2、其中标识解析时,注意,导入js是src=”jquery.min.js”,而编写React时,,是type,而不是src。
3、组件中
render:function(){
return (<div></div);/** <div>外面就是return的"()",不能用“{}”包裹 ***/
}
##常见问题
Warning: Each child in an array or iterator should have a unique “key” prop. Check the top-level render call using