react学习--1

最新推荐文章于 2023-12-28 14:17:32 发布

starryninglong

最新推荐文章于 2023-12-28 14:17:32 发布

阅读量475

点赞数 2

分类专栏： react 文章标签： react react入门 react教程 react学习

本文链接：https://blog.csdn.net/starryninglong/article/details/63685911

版权

react 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先万事皆有源，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')
);

在浏览器中访问控制台结果如下：
控制台结果1
可以看到，getDefaultProps方法只会调用一次，并且是在createclass的时候就调用；而getInitialState方法会在每个实例创建的时候，都调用一次。componentDidMount方法也打印了两次。
详细页面如下：

其余生命周期的方法，也都大同小异，大家可以自行实践。
如果最后的方法变成：

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

则效果如下
错误效果1
可见，嵌套的只显示最外层的HelloMessage。

starryninglong

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
react学习--1

首先万事皆有源，react的github地址附上：https://github.com/facebook/react看完这些之后。可以再来看本人学习的过程，本人也是在看了上面的博客然后结合官网的例子，继续学习的。推荐几个react必备网址：react生命周期学习：getDefaultProps，getInitialState，componentWillMount，render，componentDidMount等
复制链接

扫一扫

专栏目录