react的组件

1.函数式组件

import React from 'react'
function App(){
    return <h1>函数式组件</h1>
}
export default App;

2.类式组件

import React from 'react'

class App extends React.Component
{
    render(){
        return <h1>类式组件</h1>
    }
}
export default App

父组件像子组件传值，类似于VUE

//父组件
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app'
let arr=[1,2,3,4,5,6,7]
ReactDOM.render(
  <App s={arr}></App>,
  document.getElementById('root')
);

//子组件
import React from 'react'

class App extends React.Component
{
    render(){
        const data=this.props
        console.log(data);
        return <h1>类式组件</h1>
    }
}
export default App

组件的state属性（注意是属性不是变量）

import React from 'react'

class App extends React.Component
{
    //state状态
    //setState修改state
    state={
        name:"simple",
        age:20
    }
    
    render(){
    const {name,age}=this.state
    return <h1>姓名{name}----年龄{age}</h1>
    }
}
export default App

setState方法

import React from 'react'

class App extends React.Component
{
    //state状态
    //setState修改state
    state={
        name:"simple",
        age:20
    }
    
    render(){
    let {name,age}=this.state
    return (
        <div>
            <h1>姓名{name}----年龄{age}</h1>
            <button onClick={
                ()=>{
                    this.setState({
                        age:++age
                    })
                }
            }>修改state</button>
        </div>
        )
    }
}
export default App