react入门

Posted 2020-10-15 若水若鱼

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>;
}