您的位置：首页 > Web前端 > React

react学习--1

2017-03-19 16:55 260 查看

首先万事皆有源，react的github地址附上：https://github.com/facebook/react

其次，推荐个写的不错的react学习博客http://www.ruanyifeng.com/blog/2015/03/react.html

看完这些之后。可以再来看本人学习的过程，本人也是在看了上面的博客然后结合官网的例子，继续学习的。

推荐几个react必备网址：

https://codepen.io/gaearon/pen/JbbEzX react在线效果查看器，如果只想看看react代码的效果，直接在这里查看就可以了

http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&targets=&browsers=&builtIns=false&code= 可以将react风格的代码编译成比较容易理解的js代码

https://www.w3ctech.com/topic/1496 使用开发工具时，如Webstorm的配置和注意事项。

有了以上的基础，开始继续学习react。

在用webstorm编辑react代码时，可能会出现下面情况：

虽然也根据很多教程做了相应的IDE修改，但是还是报错。找不到好的解决办法，唯一的办法，就是将html代码和js代码分离。然后引入js代码的时候使用

<script src="index.js" type="text/babel"></script>

注意type属性。

接下来正式继续学习…

本DEMO实例主要熟悉下react的生命周期

主要的生命周期可以参考https://segmentfault.com/a/1190000004168886

首先是本教程demo中所有的html页面，都是一样的代码，如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<script src="index.js" type="text/babel"></script>
</head>
<body>
<div id="example"></div>
</body>
</html>

js代码如下：

var count =0;
var HeloChild = React.createClass({
//先申明 才能使用
render : function(){
//属性改变调用render
return(<a>{this.props.childProps}</a>);
}
});

var HelloMessage = React.createClass({
getDefaultProps :function(){
console.log("getDefaultProps");
//在create的时候就创建如果后面有直接赋值的属性就会覆盖此处
//所有实例共用此属性
return {title : 'Hello World tqy'};
},
getInitialState : function(){
//每个实例调用一次
count++;
console.log("getInitialState");
console.log(count);
return {mystate:"mystate",
childProps:"childProps"
};
},
render: function() {
//状态改变调用render
return (<div><h1 onClick={this.callback}>Hello {this.props.name+this.props.title }{ this.state.mystate+"\n"}</h1>
<HeloChild childProps={this.state.childProps}></HeloChild>
</div>
);
},
//函数的两种写法
componentDidMount(){
console.log("componentDidMount");
},
callback : function(event){
console.log("click");
this.setState({mystate: "mystateCCCCCCC",childProps:"childProps22"});
}

});
ReactDOM.render(
//组件&组件之间不能嵌套
<div><HelloMessage name="aaa" title="bbbb"/><HelloMessage></HelloMessage></div>,
document.getElementById('example')
);

在浏览器中访问控制台结果如下：

可以看到，getDefaultProps方法只会调用一次，并且是在createclass的时候就调用；而getInitialState方法会在每个实例创建的时候，都调用一次。componentDidMount方法也打印了两次。

详细页面如下：

其余生命周期的方法，也都大同小异，大家可以自行实践。

如果最后的方法变成：

ReactDOM.render(
//组件组件之间不能嵌套
<div><HelloMessage><HelloMessage name="aaa" title="bbbb"/></HelloMessage></div>,
document.getElementById('example')
);

则效果如下

可见，嵌套的只显示最外层的HelloMessage。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： react react入门 react教程 react学习

相关文章推荐

新的分享

章节导航