zoukankan      html  css  js  c++  java
  • react入门(一)

    JSX语法:

    • HTML 语言直接写在 JavaScript 语言之中,不加任何引号 ,
    • JSX语法中不能使用js中的关键字,例如:class 需要改为className
    • JSX语法中要写表达式的话,需要用{}包起来,
    • 如果JSX语法中的表达式是一个数组,react会展开数组
    • JSX语法中增加自定义属性需要用data-前缀( data-index='1')
    
    ReactDOM.render(
    
      <div className='aaa' style={ { backgroundColor:'pink',color:'#333' } } >
        这是jsx语法练习
          {/* 这是JSX中的注释 */}
      </div>,
      
      document.getElementById('root')
    );
    
    

    react元素:

    • React元素是不可变的。一旦创建了一个元素,就不能更改其子元素或属性 ,更新UI的唯一方法是创建一个新元素,并将其传递给ReactDOM.render(),

    下面的例子中,ReactDOM.render()每秒从setInterval()回调中调用。
    React DOM将元素及其子元素与前一元素进行比较,并仅执行必要的DOM更新以使DOM达到所需的状态,提升性能。

    function tick() {
        const element = (
            <div>
            <h1>Hello, world!</h1>
            <h2>It is {new Date().toLocaleTimeString()}.</h2>
            </div>
        );
        ReactDOM.render(
            element,
            document.getElementById('root')
        );
    }
    
    setInterval(tick, 1000);
    
    

    react组件:
    react组件分两种:

    1. 类式组件;
    2. 函数式组件;

    类式组件:
    1.必须是class定义的类,必须继承自React.Component,组件名首字母必须大写;
    2.组件必须有 constructor 方法 和 render 方法;
    3.constructor() 方法里面必须有 super() ;
    4.render()方法必须return 唯一一个 JSX dom元素

    函数式组件:
    就是一个普通函数,必须return一个JSX dom元素

    //类式组件:
    class Test extends React.Component{
        constructor(...args){
            super(...args)        
        }
        
        render(){
        
            return <div data-index='1' > 我叫{ this.props.name } </div>
        }
    }
    
    //函数式组件,利用函数返回JSX语法:
    function Welcome(props) { 
        return <h3> { props.name } </h3>;
    }
    
    
  • 相关阅读:
    BZOJ-1497 [NOI2006]最大获利 最小割
    BZOJ-2768 [JLOI2010]冠军调查 最小割
    BZOJ-3504 [Cqoi2014]危桥 最大流
    BZOJ-3894 文理分科 最小割
    HDU5196--DZY Loves Inversions 树状数组 逆序数
    【2013南京区域赛】部分题解 hdu4802—4812
    POJ1741--Tree (树的点分治) 求树上距离小于等于k的点对数
    SPOJ694 -- DISUBSTR 后缀树组求不相同的子串的个数
    POJ1743---Musical Theme (后缀数组+二分)
    POJ3729 Facer’s string 后缀数组
  • 原文地址:https://www.cnblogs.com/koala0521/p/7905772.html
Copyright © 2011-2022 走看看