说说React的事（一）

最新推荐文章于 2024-06-18 17:24:14 发布

SamYoc

最新推荐文章于 2024-06-18 17:24:14 发布

阅读量2.4k

点赞数 1

本文链接：https://blog.csdn.net/LeyYang/article/details/51960603

版权

Web 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

React

4 篇文章 0 订阅

订阅专栏

在公司用React做项目已经有一年多了，刚开始接触它的时候，给我的第一感觉就是很有颠覆性，一言不合就往JS里面插入Html代码。在MVC或者MVVM的框架里，我们宣扬的是视图V和模型M的分离，就是你负责扮靓，我负责赚钱。而React更多的是宣扬组件化思想，各位看官请看下图。
各个组件组成了我的身体

那React到底有哪些好处呢？为了方便看官查阅，我在此罗列了出来。
1. “轻”；react是很轻量的框架
2. 速度快，效率高；真正Dom其实是很巨大的，直接操作Dom很耗性能。React引入virtual dom概念，它不直接操作Dom而是将Dom结构存储在内存中，然后通过render中返回的内容做一个Dom Diff的比较，再将变化反映到Dom做局部更新。
3. 组件化思想；利用React可以轻松构建所需要的组件，并且各组件之间可轻易的组合，使得代码重用及各模块之间的测试变得更加简单。
4. 单向式响应数据流；React实现了单向式相应数据流，使得数据交互变得非常简易清晰，减少了许多重复代码，比传统的数据绑定简单。

那React到底是怎么一回事呢，我们现在来揭开它的神秘面纱，例行惯例先来一段Hello World。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
        <script src="build/react.js"></script>
        <script src="build/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel">
        ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
        </script>
    </body>
</html>

以上的页面在浏览器打开就可以清晰的看到Hello, world!了。以上代码的最后一个

var HelloWorld = React.createClass({
    render: function() {
        return (
            <h1>Hello, world!</h1>
        );
    }
});

ReactDOM.render(<HelloWorld/>, document.getElementById("example"));

Html页面只需要引用它就可以了

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

运行结果

需要注意的是，页面在某些浏览器打开可能会报错无法加载该文件例如谷歌chrome，原因是它不是http请求，如果放在服务器是完全没有问题的。但我们没有服务器想在本地看看怎么办，别急，还是有办法的。Mac可以先退出浏览器再用以下命令打开谷歌chrome。

open -a Google\ Chrome --args --disable-web-security --allow-file-access-from-files --user-data-dir=""

Windows的可以右击谷歌浏览器快捷方式，打开属性在目标位置后加上如下参数

--args --disable-web-security --allow-file-access-from-files --user-data-dir=""

继续说上面的代码，我们可以看到我们使用了给id为example的元素渲染了内容Hello, world!而此时此刻我们所创建的这个React对象就是个简单的组件了。这里有一点切记组件名字开头一定要大写。

现在假如我不想组件返回一个Hello，world给我我想说点别的，比如说洋气的中文“你好世界”要怎么做呢。这时候我们可以用React的props。

var HelloWorld = React.createClass({
    render: function() {
        return (
            <h1>{this.props.words}</h1>
        );
    }
});

ReactDOM.render(<HelloWorld words="你好世界"/>, document.getElementById("example"));

运行结果

props可用于父组件向子组件传值，这将是组件的一个初始值，一旦设置之后将不能修改。

你可能想父组件在没有传值给子组件时，子组件可以有默认的值可以用，这时候这个方法getDefaultProps就派上用场了。该方法是默认给props的各属性设置相应的值。

var HelloWorld = React.createClass({
    getDefaultProps: function(){
        return {
            words: "你好世界"
        };
    },

    render: function() {
        return (
            <h1>{this.props.words}</h1>
        );
    }
});

ReactDOM.render(<HelloWorld/>, document.getElementById("example"));

组件肯定避免不了要与用户互动，当有数据更新的时候，我们要怎么把新数据渲染到界面上呢。这里我们仍用上一个栗子来阐述这个问题，这时候我们会用到state。

var HelloWorld = React.createClass({
    getInitialState: function(){
        return {
            words: "Hello, world!"
        };
    },

    sayChinese: function(){
        this.setState({words: "你好,世界!"});
    },

    render: function() {
        return (
            <div>
                <h1>{this.state.words}</h1>
                <button onClick={this.sayChinese}>Say Chinese!</button>
            </div>
        );
    }
});

ReactDOM.render(<HelloWorld/>, document.getElementById("example"));

点击变成了中文

同props一样，state也可以通过getInitialState设置初始值，当用户点击组件，调用了方法setState修改了状态值，导致组件的状态变化，每次修改完成后都会自动调用render方法重新渲染组件，从这里也可以看出单向数据流的特性。

看起来好像组件都可以调用props的值或者state里的属性值来展示渲染数据，但其实这两者是有根本区别的。

props一旦定义就不能改变，state可以随时改变
props主要组件用于初始化，state用于与用户交互和组件更新

我的简书链接：说说React的事（一）

SamYoc

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
说说React的事（一）

在公司用React做项目已经有一年多了，刚开始接触它的时候，给我的第一感觉就是很有颠覆性，一言不合就往JS里面插入Html代码。在MVC或者MVVM的框架里，我们宣扬的是视图V和模型M的分离，就是你负责扮靓，我负责赚钱。而React更多的是宣扬组件化思想，各位看官请看下图。那React到底有哪些好处呢？为了方便看官查阅，我在此罗列了出来。 1. “轻”；react是很轻量的框架 2. 速度快
复制链接

扫一扫

专栏目录