react组件

最新推荐文章于 2022-10-04 21:52:35 发布

Cupid510

最新推荐文章于 2022-10-04 21:52:35 发布

阅读量63

点赞数

分类专栏： react 文章标签： react vue python javascript js

本文链接：https://blog.csdn.net/weixin_44283432/article/details/111307124

版权

react 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

组件

如果代码多了之后，不可能一直在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>