react学习随记
新年初始，公司的项目还没开始，趁着休闲的时间学习一下react.
· React起源于Facebook的内部项目，是一个用于构建用户界面的JavaScript库，主要适用于构建UI，可以认为react是MVC中的视图V
· react的特点如下：
声明式设计 + 代码高效灵活 + jsx语法 + 组件复用 + 单项响应的数据流
· react中重要的几点：
jsx + 组件 + react State状态 + react Props + ajax + 表单/事件 + Refs获得实际DOM
下面对这几点简单的介绍总结：
1、reactJSX
jsx就像是一个xml的JavaScript的语法扩展，它是将html和JavaScript混合编写，虽然我们使用react并不一定要用jsx，但是还是推荐使用，
jsx使用起来执行更快，而且是类型安全的，在编译的过程中就可以发现错误；
使用jsx：
！<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
这个p元素中添加自定义属性date-myattribute，添加自定义属性需要使用data-为前缀
！项目中的reactJSX代码可以放在一个独立的文件中，也可以放在当前html文件中；不过要注意的是使用jsx的时候需要标注script标签的type为text/babel
例如：<script type="text/babel" src="demo.js"></script>
！在jsx中可以使用JavaScript表达式，需要用{}括起来：
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div> ,
document.getElementById('example')
);
而且在jsx中不能使用if else语句，但是可以使用三元运算表达式来替代<h1>{i == 1 ? 'True!' : 'False'}</h1>
！react中推荐使用内联样式，我们可以使用camelCase语法来设置内联样式，react会在指定元素数字后自动添加px,
var myStyle = { fontSize: 100, color: '#FF0000' }; ReactDOM.render( <h1 style = {myStyle}>菜鸟教程</h1>, document.getElementById('example') );
！在jsx中注释需要用{}进行包括：
ReactDOM.render( <div> <h1>菜鸟教程</h1> {/*注释...*/} </div>, document.getElementById('example') );
！jsx允许在模板中插入数组，数组会自动展开所有的成员（这个是比较方便的一种形式）
var arr = [ <h1>菜鸟教程</h1>, <h2>学的不仅是技术，更是梦想！</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') );
！jsx中的html标签 VS react组件
react可以渲染html标签（strings）或者react组件（classes）
要是渲染html标签，只需要在jsx中使用小写字母的标签名，但是渲染react组件则需要创建一个大写字母开头的本地变量，jsx中使用大小的约定来区分本地组件和html标签，但需要注意一些标识符class和for不建议最为xml属性名，最为替代ReactDOM使用className和HTMLFor来做对应的属性
html标签渲染：
var myDivElement = <div className="foo" />; ReactDOM.render(myDivElement, document.getElementById('example'));
react组件渲染：
var MyComponent = React.createClass({/*...*/}); var myElement = <MyComponent someProperty={true} />; ReactDOM.render(myElement, document.getElementById('example'));
2、react组件
！react中React.createClass()方法用于生成一个组件类HelloMessage ,<HelloMessage/>实例组件类并输出信息，需要注意的是原生html元素名以小写字母开头，而自定义的react类名以大写字母开头，比如HelloMessage,除此之外还要注意组件类只能包含一个顶层标签，不然也会报错，如果我们需要向组件传递参数，可以使用this.props对象
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="Runoob" />, document.getElementById('example') );
~~注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
！复合组件：我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。
//复合组件
var WebSite = React.createClass({
render:function () {
return(
<div>
<Name name={this.props.name}></Name>
<Link site={this.props.title}></Link>
</div>
);
}
});
var Name = React.createClass({
render:function () {
return(
<h1>{this.props.name}</h1>
)
}
});
var Link = React.createClass({
render:function(){
return(
<a href={this.props.site}>{this.props.site}</a>
)
}
});
ReactDOM.render(
<WebSite name="百度" title="http://www.baidu.com"/>,
document.getElementById("10")
)
3、ReactState状态
react是把组件看成一个状态机，通过与用户的交互，实现不同的状态，然后渲染UI，让用户界面和数据保持一致
在react中只需更新组件的state，然后根据新的state重新渲染用户界面，并不需要操作DOMvar LikeButton = React.createClass({
getInitialState: function() {//设置初始状态，这个对象可以通过this.state属性读取 return {liked: false}; }, handleClick: function(event) { this.setState({liked: !this.state.liked}); }, render: function() { var text = this.state.liked ? '喜欢' : '不喜欢'; return ( <p onClick={this.handleClick}>//用户点击组件，导致状态变化，this.setState方法就修改状态值，每次修改之后自动调用this.render方法，再次渲染组件 你<b>{text}</b>我。点我切换状态。 </p> ); } }); React.render( <LikeButton />, document.getElementById('example') );
4、React Props
react中state和props主要的区别在于props是不可改变的，而state可以根据与用户的交互来进行改变，这也是为什么有些容器组件需要定义state来更新和修改数据，但是子组件只能通过props来传递数据
可以通过getDefaultProps()方法为props设置默认值
var HelloMessage = React.createClass({ getDefaultProps: function() { return { name: 'Runoob' }; }, render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') );
！state和props：在父组件中设置state，并通过子组件使用props将其传递到子组件上，在render函数中，设置name和site来获取父组件传递过来的数据
var WebsiteCur = React.createClass({
getInitialState:function(){
return{
name:'baidu',
site:"http://www.baidu.com"
};
},
render:function () {
return (
<div>
<NameCur name={this.state.name}/>
<LinkCur site={this.state.site}/>
</div>
);
}
});
var NameCur = React.createClass({
render:function () {
return(
<h1>{this.props.name}</h1>
)
}
});
var LinkCur = React.createClass({
render:function(){
return (
<a href={this.props.site}>{this.props.site}</a>
)
}
});
ReactDOM.render(
<WebsiteCur />,
document.getElementById("01")
);
！props验证：使用propTypes, 可以保证应用组件被正确使用，当向props传入无效数据的时候，虽然页面上会正常显示，但是控制台会有报错
var title = "demo"; // var title = 123; var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isRequired, }, render: function() { return <h1> {this.props.title} </h1>; } }); ReactDOM.render( <MyTitle title={title} />, document.getElementById('example') );
5、React组件API
设置状态：setState
替换状态：replaceState
设置属性：setProps -> setProps(object nextProps[, function callback]
替换属性：replaceProps -> replaceProps(object nextProps[, function callback]
强制更新：forceUpdate(一般来说要避免使用这个属性)
获取DOM节点：findDOMNode
判断组件挂载状态：isMOunted 返回true 或者false , 表示组件是否已经挂载到DOM中
关于setState
不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。
setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。
setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。
var Counter = React.createClass({ getInitialState: function () { return { clickCount: 0 }; }, handleClick: function () { this.setState(function(state) { return {clickCount: state.clickCount + 1}; }); }, render: function () { return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>); } }); ReactDOM.render( <Counter />, document.getElementById('message') );
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
