ReAct 基本语法

最新推荐文章于 2025-09-01 15:22:56 发布

转载最新推荐文章于 2025-09-01 15:22:56 发布 · 1.7k 阅读

JavaScript 同时被 3 个专栏收录

19 篇文章

订阅专栏

react

13 篇文章

订阅专栏

HTML

10 篇文章

订阅专栏

一、ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。


ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

上面代码将一个 h1 标题，插入 example 节点（查看 demo01），运行结果如下。

结构

在JSX文件中，可以直接通过React.createClass来定义组件：

var ButtonComponent = React.createClass({
    getDragonKillingSword: function(){
        //送宝刀
    },
    render: function(){
        return (<button onClick={this.getDragonKillingSword}>屠龙宝刀，点击就送</button>);
    }
});

父组件可以直接将需要执行的函数传递给子组件：

<ButtonComponent clickCallback={this.getSwordButtonClickCallback}/>

然后在子组件中调用父组件方法：

var ButtonComponent = React.createClass({
    render: function(){
        return (<button onClick={this.props.clickCallback}>屠龙宝刀，点击就送</button>);
    }
});

子组件通过this.props能够获取在父组件创建子组件时传入的任何参数，因此this.props也常被当做配置参数来使用

组件状态

在React中，每个组件都有自己的状态，可以在自身的方法中通过this.state取到，而初始状态则通过getInitialState()方法来定义，比如这个屠龙宝刀按钮组件，它的初始状态应该是没有点击过，所以getInitialState方法里面应当定义初始状态clicked: false。而在点击执行的方法中，应当修改这个状态值为click: true：

var ButtonComponent = React.createClass({
    getInitialState: function(){
        //确定初始状态
        return {
            clicked: false
        };
    },
    getDragonKillingSword: function(){
        //送宝刀

        //修改点击状态
        this.setState({
            clicked: true
        });
    },
    render: function(){
        return (<button onClick={this.getDragonKillingSword}>屠龙宝刀，点击就送</button>);
    }
});

组件依赖

组件依赖的处理一般分为两个部分：组件加载和组件使用

组件加载

React没有提供相关的组件加载方法，依旧需要通过<script>标签引入，或者使用模块加载器加载组件的JSX和资源文件。

组件使用

如果细心，就会发现其实之前已经有使用的例子了，要想在一个组件中使用另外一个组件，比如在ParentComponent中使用ChildComponent，就只需要在ParentComponent的render()方法中写上<ChildComponent />就行了，必要的时候还可以传些参数。

疑问

到这里就会发现一个问题，React除了只处理了结构和逻辑，资源也不管，依赖也不管。是的，React将近两万行代码，连个模块加载器都没有提供，更与Angularjs，jQuery等不同的是，他还不带啥脚手架...没有Ajax库，没有Promise库，要啥啥没有...

虚拟DOM

那它为啥这么大？因为它实现了一个虚拟DOM（Virtual DOM）。虚拟DOM是干什么的？这就要从浏览器本身讲起

如我们所知，在浏览器渲染网页的过程中，加载到HTML文档后，会将文档解析并构建DOM树，然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树，然后将RenderObject树渲染成页面（当然中间可能会有一些优化，比如RenderLayer树）。这些过程都存在与渲染引擎之中，渲染引擎在浏览器中是于JavaScript引擎（JavaScriptCore也好V8也好）分离开的，但为了方便JS操作DOM结构，渲染引擎会暴露一些接口供JavaScript调用。由于这两块相互分离，通信是需要付出代价的，因此JavaScript调用DOM提供的接口性能不咋地。各种性能优化的最佳实践也都在尽可能的减少DOM操作次数。

而虚拟DOM干了什么？它直接用JavaScript实现了DOM树（大致上）。组件的HTML结构并不会直接生成DOM，而是映射生成虚拟的JavaScript DOM结构，React又通过在这个虚拟DOM上实现了一个 diff 算法找出最小变更，再把这些变更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在，计算性能会比较好，而且由于减少了实际DOM操作次数，性能会有较大提升

道理我都懂，可是为什么我们没有模块加载器？

所以就需要Webpack了