React学习笔记①

• 三种导出方式

export let num = 1；//1

let num2 = 2；//2

export {num2};//2

export default {default}//3

• 三种导入方式

import xxx from 'xxxx.js'；//1

import {num,num2} from 'xxxx.js';//2

import * as obj from 'xxxx.js'//3

• import 和require

import

• import属于加载前置机制，因此将其全放在代码顶部，代码解析逐个import获取一个引入的列表，先引入依赖，再向下执行代码。加载前置

require

if（true）{

　　let xxxxx=require(xxxx);

}

• 加载滞后,代码执行到那一行就加载

//模版

class num {

age=12;

constructor(props){//这里的props等于子类super(props)

　　this.age = props.age;

}

}

class num2 extends num {

name = 'jack';

constructor(props){//构造器

　　super(props);//初始化父类的构造器

　　this.name = props.name;

}

}

let allnum = new num2（name:'mack',age:23）

//双向数据

//使用jsx必须引入React

import React,{Component} from 'react';

class App extends Component{

constructor(){

　　//初始化属于组件的属性

　　super();

this.state = {

　　num:1

}

}

changehandler(e){

　　this.state.num = e.target.value;

　　this.setState({});

}

render(){

return(

<div>

{this.state.num}

<hr></hr>

<input type='text' value={this.state.num} onChange={(e)=>{this.changehandler(e)}}></input>

</div>

)

}

}

export default App;