react基础知识

react基础知识

搭建项目

npm install -g create-react-app
使用 npx create-react-app 项目名称
运行项目的话 npm run start

react代码块组件: Simple React Snippets

jsx语法

我们的react页面的元素放在我们的return中
语法见下：

import React from 'react';
import "./Demo3.css"

function Demo3() {
  let obj={
    username: "小编",
    say:"嘎嘎帅气"
  }
  return (
    <div className="box">
      <div style={{border : "1px solid"}}>123456</div>
      <div>{obj.username+obj.say}</div>
    </div>
  );
}

export default Demo3;

组件

(1).es5组件,又称函数组件
语法如下:

import React from 'react';

function Demo4() {
    return ( 
        <div>我是函数组件</div>
     );
}

export default Demo4;

(2) 类组件
语法如下

import React, { Component } from 'react';

class Demo4 extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return ( 
            <div>我是类组件</div>
         );
    }
}
 
export default Demo4;

react对标签属性的变化及语法

class => className
style要以插值表达式的进行使用.
在raect中<代表html元素；
在raect中{}代表js代码
在react中注释{/**/}

代码如下:

import React from 'react';
import "./Demo4.css"
function Demo4() {
    return ( 
        <div>
            <div className="box">
                <p style={{border:"1px solid",paddingLeft:"50px"}}>疫情将会过去，中国加油！！</p>
            </div>
        </div>
     );
}

export default Demo4;

react生命周期

rander 渲染
componentWillMount 组件将要挂载
componentDidMount 组件已经挂载
componentWillReceiveProps 组件将接收属性数据
componentWillUpdate 组件将要跟新
componentDidUpdate 组件跟新完毕
componentWillUnmount 组件将要卸载

事件绑定

点击事件 onClick={}
语法:

//函数组件来做点击事件
import React from 'react';
import "./Demo4.css"
function Demo4() {
    return ( 
        <div>
          <button onClick={()=>{alert("123")}}>点击我</button>
        </div>
     );
}

export default Demo4;

//类组件
import React, { Component } from 'react';

class Demo4 extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    myfunc(){
        console.log(this);
    }
    render() { 
        return ( 
            <div>
                <button onClick={this.myfunc}>执行函数</button>
            </div>
         );
    }
}
 
export default Demo4;

注意this的指向问题

解决this指向的问题

1.箭头函数

import React, { Component } from 'react';

class Demo4 extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    myfunc=()=>{
        console.log(this);
    }
    render() { 
        return ( 
            <div>
                <button onClick={this.myfunc}>执行函数</button>
            </div>
         );
    }
}
 
export default Demo4;

2.利用我们的bind来修改this指向

import React, { Component } from 'react';

class Demo4 extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
        this.myfunc=this.myfunc.bind(this);
    }
    myfunc(){
        console.log(this);
    }
    render() { 
        return ( 
            <div>
                <button onClick={this.myfunc}>执行函数</button>
            </div>
         );
    }
}
 
export default Demo4;