react基础

使用create-react-app脚手架生成的应用

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

父组件给子组件传递数据

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

嵌入函数类型的组件

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

列表遍历

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 {
  constructor(props) {
    super(props)
    this.state = {
      arr: ["小明","小花","小张"]
    }
  }
  render() {
    return (
      <div>
        <ul>
          {this.state.arr.map((v, index) => {
            return <li key={index}>{v} + {index}</li>
          })}
        </ul>
        <h2>我是函数类型的 {this.props.num} 组件</h2>
      </div>
    )
  }
}

export default App

点击事件

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

生命周期

image.png

componentWillMount() {
  console.log("组件要开始加载了")
}
render() {
  console.log("组件加载中")
}
componentDidMount() {
  console.log("组件加载完毕")
}