React从零学起

最新推荐文章于 2024-08-19 11:18:08 发布

喜欢特别冷的冬天下着雪

最新推荐文章于 2024-08-19 11:18:08 发布

阅读量2k

点赞数

分类专栏： Web 文章标签： React

本文链接：https://blog.csdn.net/kkkkkxiaofei/article/details/51453345

版权

本文介绍了React的基础知识，强调React是独立的视图层框架，并通过一个计数器示例展示了如何创建组件。文章进一步讨论了Container组件的概念，用于分离UI和逻辑。接着引入Redux进行状态管理，利用store分发actions。此外，还讲解了如何使用`connect`管理dispatch和reducer，以及如何拆分actions以提高可读性。最后，建议初学者避免一开始就依赖各种module，应从理解React核心概念开始。

摘要由CSDN通过智能技术生成

原文请戳

初接触React，除了不习惯其组件化的设计原则外，往往它所‘依赖’的众多module也会让初学者感到困惑，使得不知从何学起。此文只是我对React的一些浅析，希望能帮助想要学习React的朋友入门。

1.React从来就是独立的

正如上面我提到的，React’依赖’了很多module，但是这种依赖并不是所谓的耦合依赖，只是为了更好的去实现React。换句话说，React只是一个View层面的框架，它可以和其他module自然的融合（更好的去实现）。

我们可以只利用React去实现官网上那个Counter的demo，这里我做了一个简易版。

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Redux counter example</title>
  </head>
  <body>
    <div id="root">
    </div>
    <script src="/static/bundle.js"></script>
  </body>
</html>

页面只引了一个js文件，该文件为webpack打包而成，具体webpack打包原理不在这里赘述。

MyCounter.js

var React = require('react');

var Counter = React.createClass({
    getInitialState: function() {
   
        return {value: 0};
    },
    plus: function() {
   
        this.setState({
            value: ++this.state.value
        });
    },
    minus: function() {
   
        this.setState({
            value: --this.state.value
        });
    },
    render: function() {
   
        return (
            <div>
                <button onClick={
  this.plus}>+</button>
                <span>{