react简单总结--尚未完全理解可能会有错误，后期重写

目录

一、react简述

二、jsx语法 

三、 react的组件

四、模板语法  

 五、事件 

 六、表单的数据绑定

七、组件 

 八、组件传参 

九、生命周期 

---

一、react简述

React是一个简单的javascript UI库，用于构建高效、快速的用户界面。它是一个轻量级库，因此很受欢迎。它遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效。它使用虚拟DOM来有效地操作DOM。它遵循从高阶组件到低阶组件的单向数据流。

特点：组件化、单向数据流、生命周期、虚拟dom、hooks 

二、jsx语法 

方便js中书写html模板,javascript与html混合写法

1. 只有1个根节点
2. {} js表达式
3. {/* 注释内容*/}
4. className定义类名
6. 样式对象会自动展开
6. 数组可以包含html ,并自定展开

// 定义一个样式对象
var styles = {
  fontSize: "48px",
  textAlign: "center",
  color: "green",
};
 
// 定义一个数组
var arr = [
  <h2>我最厉害</h2>,
  <p>我就是个p标签</p>,
  <a href="http://www.baidu.com">百度</a>,
];
 
// 创建个App类
function App() {
  // 返回一段html节点
  return (
    <div>
      <h1 className="active">你好react</h1>
      <p style={styles}>学好react 月薪过亿</p>
      {arr}
      {/* <h3>{2 + 4}</h3>
      <p>{5 > 10 ? "大于10" : "不是"}</p> */}
    </div>
  );
}
 
// 导出
export default App;

三、 react的组件

函数组件

function App(){
    return <div> ... </div>
}
export default App;

类组件 

import React,{Componet} from 'react'

class App extends Componet {
    constructor(props){
        super(props)
    }
    state = {num:5}
   render(){
      return <div></div>
   }
}

export default App

 

// 导入组件
import React, { Component } from "react";
// 创建一个class类
class App extends Component {
  // 类的构造函数
  constructor(props) {
    // 调用父组件构造函数
    super(props);
    // 自定义 状态数据
    this.state = { num: 5 };
  }
  // 渲染内容
  render() {
    return (
      <div>
        <h1>App</h1>
        <p>{this.state.num}</p>
      </div>
    );
  }
}
// 导出
export default App;
// Component组件
// extends基础
// constructor构造函数
// super超级
// state状态

区别

函数组件通常展示,类组件通常做为容器
类组件可以有state,管理数据用类组件,函组件没有state
函组件没有this,类组件 有this
函数组件没有生命周期,类组件有生命周期

四、模板语法  

文本
普通   { 文本内容}
html文本   <div dangerouslySetInnerHTML=={{__html:html文本内容}}>

  条件渲染
 {flag&&<h1>为true显示</h1>}
 {flag?'true显示':'false显示'}

  列表渲染
{list.map(item=><h3 key={item}>{item}</h3>)}

 五、事件 

 

import React, { Component } from "react"; //imrc
class App extends Component {
  //ccc
  constructor(props) {
    super(props);
    this.state = { num: 5 };
  }
  state = {};
  say = () => {
    alert("钓鱼岛是中国的");
  };
  doit = (msg) => {
    alert("我爱" + msg);
  };
  add = (n = 1) => {
    this.setState({ num: this.state.num + n });
  };
  render() {
    return (
      <div>
        <h1>更新状态state</h1>
        <button onClick={this.add.bind(this, 5)}>{this.state.num}传参</button>
        <button
          onClick={() => {
            this.add(3);
          }}
        >
          {this.state.num}传参
        </button>
        <button onClick={() => this.add()}>{this.state.num}传参</button>
        <h1>添加事件</h1>
        <p onClick={this.doit.bind(this, "河南")}>河南-传参</p>
        <p onClick={() => this.doit("祖国")}>祖国-传参</p>
        <p onClick={this.say}>钓鱼岛</p>
        <p onClick={() => alert("坐飞机")}>解放</p>
        <button>{this.state.num}</button>
      </div>
    );
  }
}
//this.doit.bind(this, "河南");
//基于doit返回一个新的函数,
//新函数的this是bind的第一个参数,
//新函数的参数是bind第二个参数;
 
export default App;

和原生js事件一致 事件命名用驼峰式
onclick   onClick
onmouseover  onMouseover
事件总是要响应一个函数
<h1 oncClick={()=>{ alert("abc")}}>
事件响应 箭头函数
doit = ()=>{ alert("你好")}

<h1 onClick={this.doit}>
事件响应定义好的函数
事件传参
    <h1 onClick={()=>{this.add(参数)}}>
    <h2 onClick={this.add.bind(this,参数)}>

state

react组件的状态/数据
this.setState({k:新的值})

当state发生变化,引用state的视图会自动更新

 六、表单的数据绑定

 

import React, { Component } from "react";
class App extends Component {
  constructor(props) {
    super(props);
  }
  state = { msg: "hello" };
 
  // 用箭头函保障this正确性
  // 事件对象(input）对象对应的值
  updateMsg = (e) => this.setState({ msg: e.target.value });
  render() {
    return (
      <div>
        <h1>表单数据的绑定</h1>
        <p>{this.state.msg}</p>
        {/* value和onChange都应该同时绑定 */}
        <input type="text" value={this.state.msg} onChange={this.updateMsg} />
      </div>
    );
  }
}
 
export default App;

<input  value={this.state.msg} onChange={this.changeMsg}>

changeMsg=e=>this.setState({msg:e.target.value})

七、组件 

01定义组件
src/components/Steper.js
02在App.js导入组件
import Steper from './components/Steper'

03在App.js render函数中使用
<Steper></Steper>
04组件名称的首字母必须大写

 八、组件传参 

父传子 props
    父组件传递  <Steper  num={5}>
    子组件接收  props.num
默认参
    Steper.defaultProps = {
          num:1
     }
子传父,执行父组件的传递过来的props回调函数
子传父:执行回调函数
子传父
    父组件 ：定义函数并把函数传递给子组件
     updateSize = (n)=>this.setState({size:n})
     <Steper updateSize={this.updateSize}>
    子组件
     执行props.updateSize()
     相当于执行父组件的updateSize方法

九、生命周期 

 

初始化阶段: 由ReactDOM.render()触发—初次渲染
1. constructor() ---构造器
2. componentWillMount() ---将要挂载
3. render() ---render
4. componentDidMount() ---挂载时
更新阶段: 由组件内部this.setSate()或父组件重新render触发
1. shouldComponentUpdate() ---是否要进行更改数据
2. componentWillUpdate() ---将要更新数据
3. render()
4. componentDidUpdate() ---更新数据
卸载组件: 由ReactDOM.unmountComponentAtNode()触发
componentWillUnmount() ---卸载

1.render：初始化渲染或更新渲染调用
2.componentDidMount：开启监听, 发送ajax请求
3.componentWillUnmount：做一些收尾工作, 如: 清理定时器