React组件

React组件创建有两种方式

// src/index.js 入口文件
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App/>,document.querySelector('#root'))

ReactDOM.render(react元素[jsx标签]/react组件 , 容器) 用于渲染组件
ReactDOM.render是React的最基本方法用于将模版转为HTML语言，并插入指定的DOM节点。
ReactDOM.render(template,targetDOM) 该方法接受两个参数：

1. 创建的模版，多个dom元素外层需要使用一个标签进行包裹，同Vue每个组件需要一个根节点。
2. 插入该模板的模板位置。

   类组件

   // src/App.js
   import React from 'react'
   class App extends React.Component{ // React.PureComponent
    render(){
        return(
            <div>类组件的写法1</div>
        )
    }
   }
   export default App

   react中pureComponent和Component区别 链接

   为什么使用pureComponent? 区别？ 优缺点： 为什么可以提升性能？

总结：pureComponent能够节约大部分不必要的渲染，尤其在表单等复杂组件中，将组件拆分成简单的pureComponent，使得组件变得可维护。

函数组件

import React from 'react'
const App=()=>{
    return (
        <div>function组件</div>
    )
}
// function App(){
//     return (
//         <div>这是React函数组件的写法</div>
//     )
// }
export default App