react学习笔记

未完善

环境要求

1. npm install -g create-react-app
2. create-react-app my-app
3. npm install --save react-router
// 安装的时候最好使用yarn，使用npm安装不上路由，有node版本警告
yarn intall
// 注意不是react-router，这个很少用
// yarn add react-router
yarn add react-router-dom

文件结构

public静态资源文件夹
mainifest.json应用加壳，快应用，pwa，配置app的名字，图标，权限索取等信息

jsx语法规则

1. 定义虚拟dom时不要写引号

const vdom=<h1>虚拟dom</h1>; //正确
const vdom2='<h1>虚拟dom</h1>'; // 错误

2. 标签中混入js表达式时要用=={ }==包裹

3. 样式的类名指定不要用class，要用className

4. 内联样式要用style={ {key:value}}的形式去写

5. 只有一个根标签

6. 标签必须闭合

react中如果标签首字母大写表示组件，首字母小写表示普通的html标签

关于组件

react组件有两种形式，一是函数式组件，适用于简单组件，二是类式组件(class)，适用于复杂组件，react组件有三大属性state、props、refs，还有context也重要

函数式组件定义

function FunComp(){
   
	retrun <div>这里定义的是函数式组件</div>;
}

类式组件，类式组件需要继承React.Component

class ClassComponent extends React.Component{
   
	render(){
   
		return <div>这里定义的是类式组件</div>;
    }
}

state

state目前来看相当于angular中的变量集合，主要采用对象方式存储，要更改state中值，必须使用setState({要修改的变量:新的变量值})方法，每一次调用setState就触发一次render

class ClassComponent extends React.Component{
   
    constructor(props){
   
        super(props);
        this.state={
   filed:'变量值1'};
    }
	render(){
   
		return <div>这里定义的是类式组件</div>;
    }
}

点击事件与this问题

react点击事件与原生dom事件名称基本一致，但是名称是小驼峰方式

class ClassComponent extends React.Component{
   
    // 类中this的指向
 	// 正常情况下类中的this指向的是类的实例对象
    // 而onClick={this.test}这个方式其实是将test函数赋值给onClick
 	// 在点击的时候其实是直接调用了test方法，而不是一个实例对象调用test方法
 	// const p=new Person();
 	// p.test();this-->Person
	// const a=p.test;
	// a.test();this-->undefined
    constructor(props){
   
        super(props);
        this.state={
   filed:'变量值1'};
        // 如果不写这句，调用时候test中的this是undefined
        this.test=this.test.bind(this);
    }
	render(){
   
		// 注意，不能是onClick="test()"，需要的是表达式，不能是字符串
		// 也不能是onClick={test()}，这样写方法会被立即调用
		// onClick={this.test}，这样写方法中的this是undefined
		return <div onClick={
   this.test}>这里定义的是类式组件</div>;
    }
    test(){
   
    	consnle.log('点击了',this.state.filed);
    }
}   

以上是为了证明this相关的知识，以下是实际使用

class ClassComponent extends React.Component{
   
	// 直接这里写相当于直接在这个类上面添加成员，等于在构造器中赋值
 state={
   filed:'变量值1'};
	render(){
   
		return <div onClick={
   this.test}>这里定义的是类式组件</div>;
 }
 // 这里使用的箭头函数，由于箭头函数自身没有this，会向外部寻找this
 test=()=>{
   
    	consnle.log('点击了',this.state.filed);
 }
}

props

props用来接收传入组件内部的值，可以限制类型以及设置默认值，props既可以在类组件中使用，也可以在函数式组件中使用

1. 类式组件中使用props

class ClassComponent extends React.Component{
   
    // 对标签属性进行类型、非必要性的限制
   	static propTypes={
   
        // 限制filed类型为string同时是必传属性
        // 关于PropTypes是15.5之后的东西，之前版本是React.PropTypes
        // 直接使用PropTypes要引入需要相应的包
        filed:PropTypes.string.isRequired
    };
	// 设置默认值
	static defaultProps={
   
        filed:'我是默认值'
    };
   	render(){
   
   		return <div>这里定义的是类式组件</div>;
    }
}

2. 函数式组件中

function FunComp(props){
   
	const {
   filed1,filed2}=props;
	return(
		<div>{
   字段1的值:filed1}</div>
	);
}
// 函数式组件对props的限制形式
FunComp.propTypes={
   
	filed:PropTypes.string.isRequired
};
FunComp.defaultProps={
   
	filed:'我是默认值'
};

关于constructor

官网对于构造器有这么两句话，构造函数仅用于以下两种情况

通过给 this.state 赋值对象来初始化内部 state。
为事件处理函数绑定实例

class ClassComponent extends React.Component{
   
    constructor(props){
   
     	// 这里的props不一定要接，但是如果要使用this.props，
        // 必须接收props并传入super，否则拿到的会是undefined
        super(props);
        this.state={
   filed:'变量值1'};
        this.test=this.test.bind(this);
    }
	render(){
   
		return <div>这里定义的是类式组件</div>;
    }
}

refs

ref相当于angular中的模板引用变量#demo

字符串形式的ref

class ClassComponent extends React.Component{
   
    test1