react基础

react优势

1. React主要用于构建UI，通过对DOM的模拟，最大限度地减少与DOM的交互；

2. 组件构建，代码复用

3. 单向的响应数据流，state通过与用户交互来改变状态，props是不变的，通常将父组件设置为state，子组件设置为props；

4. React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

react知识点

hello world

//  app.js
import React from 'react'

class App extends React.Component {
  render() {
    return <h2>hello world</h2>
  }
}

export default App

jsx嵌入表达式

// app.js
import React from 'react'

class App extends React.Component {
  render() {
    const name = 'angus'
    return <h2>hello world {name}</h2>
  }
}

export default App

jsx嵌入类组件

// app.js
import React from 'react'

class App extends React.Component {
  render() {
    const name = 'angus'
    return(
      <div>
          <h2>hello world {name}</h2>
          <Hello></Hello>
      </div>
    )
  }
}

class Hello extends React.Component {
  render() {
    const num = 1
    return <h2>我是 {num} 个组件</h2>
  }
}

export default App

获取父组件或自己的属性

获取父组件数据
需要现在从父子组件传值到子组件，然后在子组件中使用this.props获取父组件数据

获取自己的数据 
需要先在constructor中声明，然后使用this.state获取

父组件给子组件传递数据

import React from 'react'

class App extends React.Component {
  render() {
    const name = 'angus'
    return(
      <div>
          <h2>hello world {name}</h2>
          <Hello num="1"></Hello>
      </div>
    )
  }
}

class Hello extends React.Component {
  render() {
    return <h2>我是 {this.props.num} 个组件</h2>
  }
}

export default App

子组件向父组件传递数据（借用事件）

子组件

<button onClick={this.addMen.bind(this,this.state.inputValue)}>添加人员</button>

父组件

<Top addMen={this.addMen.bind(this)}></Top>

嵌入函数类型的组件

import React from 'react'

class App extends React.Component {
  render() {
    const name = 'angus'
    return(
      <div>
          <h2>hello world {name}</h2>
          <Hello num="1"></Hello>
      </div>
    )
  }
}

function Hello(props) {
  return <h2>我是函数类型的 {props.num} 组件</h2>
}

export default App

class

.red { color: "red" }

<h1 className="red"}>hello world</h1>

style

<h1 style={{"color": "blue"}}>hello world</h1>

数据双向绑定

import React, {Component} from 'react';

class A extends Component{
    constructor(props) {
        super(props)
        // 先声明
        this.state = {
            inputValue: ''
        }
    }
    // 给input标签赋值
    inputChange(e) {
        console.log(e.target.value);
        // 赋值需要借助this.setState
        this.setState({
            inputValue: e.target.value
        })
    }

    render() {
       return (
           <div>
               <p>{this.state.inputValue}</p>
               <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
           </div>
       )
    }
}

export default A;

点击事件

import React from 'react'

class App extends React.Component {
  render() {
    const name = 'angus'
    return(
      <div>
          <h2>hello world {name}</h2>
          <Hello></Hello>
      </div>
    )
  }
}

class Hello extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      arr1: ["小明","小花","小张"]
    }
  }
  //  注意加箭头函数，不然this会失效导致报错
  addUser = () => {
    console.log(11111)
    //  修改数据
    this.setState({
      arr1: [...this.state.arr1, "小" + Math.random()]
    })
  }
  render() {
    return (
      <div>
        <button onClick={ this.addUser }>添加人员</button>
        <ul>
          {this.state.arr1.map((v, index) => {
            return <li key={index}>{v} + {index}</li>
          })}
        </ul>
      </div>
    )
  }
}

export default App

列表遍历

import React, { Component } from 'react';

class B extends Component {
    constructor(props) {
        super(props)
        this.state = {
            inputValue: '',
            list: ['dj', 'zs', 'ls']
        }
    }
    // 当input输入框输入值时，给inputValue赋值
    inputChange(e) {
        this.setState({
            inputValue: e.target.value
        })
    }
    // 点击天机按钮时，将值赋给列表，并清空input框
    addPerson() {
        this.setState({
            list: [...this.state.list,this.state.inputValue],
            inputValue: ''
        })
    }

    render() {
        return (
            <div>
                <div>
                    <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
                    <button onClick={this.addPerson.bind(this)}>增加</button>
                </div>
                <ul>
                    {
                        this.state.list.map((item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default B;

生命周期

加载组件
constructor // 构造函数 生命周期开始
componentWillMount  //  组件将要加载 组件还没有渲染出来，但是js逻辑已经开始执行了，一些js的异步方法可以放在这个周期去执行
render  // 渲染 组件已经渲染出来了
componentDidMount   //  组件加载完成 组件已经挂载成功了

更新组件
shouldComponentUpdate   // 子组件是不是应该更新
componentWillUpdate     // 组件将要更新
render  
componentDidUpdate      // 组件更新完成

改变props
componentWillReceiveProps   // 将要接收父组件传来的props
shouldComponentUpdate 
componentWillUpdate
render
componentDidUpdate

销毁组件
componentWillUnmount    // 组件将要销毁