react组件

组件

如果代码多了之后，不可能一直在render方法里写，所以就需要把里面的代码提出来，定义一个变量，像这样：

const app = <h1>欢迎进入React的世界</h1>
ReactDOM.render(
  <div>
    { app }
  </div>
  document.getElementById('root')
)
函数式

这里我们定义的方法实际上也是react定义组件的第一种方式-定义函数式组件，这也是无状态组件。

方式一：函数式组件

​ const 组件名(首字母大写)=（props）=>{

​ return jsx表达式

​ }

const App = (props) => {
    return (
    	<h1>函数组件</h1>
    )
}
ReactDOM.render(
  // React组件的调用方式
  <App/>,
  document.getElementById('root')
)

这样一个完整的函数式组件就定义好了。但要注意！注意！注意！组件名必须大写，否则报错。

class组件

ES6的加入让JavaScript直接支持使用class来定义一个类，react的第二种创建组件的方式就是使用的类的继承ES6 class是目前官方推荐的使用方式，它使用了ES6标准语法来构建，看以下代码：

class 组件名 extends React.Component {
render(){ //render是必不可少的钩子函数
return jsx表达式
}
}

<body>
        <div id="app">
        </div>
        <script type="text/babel">
            class App extends React.Component{
                render(){
                    return (
                        <h1>class组件</h1>
                    )
                }
            }
            ReactDOM.render(
    <App/>,document.getElementById("app")
            )
        </script>
    </body>
posted @ 2020-12-16 14:39  Cupid05  阅读(69)  评论(0)  编辑  收藏  举报