zoukankan      html  css  js  c++  java
  • React一些必须要知道的基础

         React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

    1、JSX语法

    React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

    ReactDOM.render(
    	<div>
    	<h1>菜鸟教程</h1>
    	<h2>欢迎学习 React</h2>
        <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
        </div>
    	,
    	document.getElementById('example')
    );
    

    我们可以在以上代码中嵌套多个 HTML 标签,需要使用一个 div 元素包裹它(有且只能有一个最外层标签),实例中的 p 元素添加了自定义属性 data-myattribute,添加自定义属性需要使用 data- 前缀。  

    2、组件的应用

    通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。React的核心就是组件,所谓组件,即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。例如,Facebook的instagram.com整站都采用了React来开发,整个页面就是一个大的组件,其中包含了嵌套的大量其它组件,大家有兴趣可以看下它背后的代码。下面我们来看一个组件的例子:

     var HelloMessage = React.createClass({
            render: function() {
              return <h1>Hello World!</h1>;
            }
          });
    
          ReactDOM.render(
            <HelloMessage />,
            document.getElementById('example')
          );
    

    React.createClass 方法用于生成一个组件类 HelloMessage

     

     

  • 相关阅读:
    Wx-小程序-使用canvas截图保存
    Wx-小程序-图片预览、保存
    CSS-文本溢出省略号表示
    Wx-小程序-长按复制文本
    Vue-组件通信
    JS-禁用浏览器前进后退
    JS-内置对象和方法
    JS-冒泡排序
    JS-常用方法合集
    Wx-小程序-组件式开发之Vant
  • 原文地址:https://www.cnblogs.com/daikefeng/p/6290993.html
Copyright © 2011-2022 走看看