react声明组件有两种方式:函数式组件和类组件
函数式组件
函数式组件也是无状态组件,
无状态组件是属于一个函数没有继承功能;也没有生命周期,它的动态数据都是通过父组件传值子组件通过props接收渲染,针对一些简单的逻辑判断等等,选 用无状态组件。组件名首字母必须大写。
import React from 'react'
import ReactDOM from 'react-dom'
/*
const 组件名(首字母大写)=(props)=>{
return jsx表达式
}
*/
const App = (props) => {
return (
<h1>欢迎进入{props.name}的世界</h1>
)
}
ReactDOM.render(
// React组件的调用方式
<App name={"react"} />,
document.getElementById('root')
)
class组件:
class组件是有状态组件:有状态组件的区别是它属于一个class类,
有继承,可以通过this来接收状态和属性如果你想用react的生命周期,
想对一些数据进行增删改查的话就要用到有状态组件。
import React from 'react'
import ReactDOM from 'react-dom'
/*
class 组件名 extends React.Component {
render(){ //render是必不可少的钩子函数
return jsx表达式
}
}
*/
class App extends React.Component {
render () {
return (
// 注意这里得用this.props.name, 必须用this.props
<h1>欢迎进入{this.props.name}的世界</h1>
)
}
}
ReactDOM.render(
<App name="react" />,
document.getElementById('root')
)
组件添加样式:
行内样式:
<p style={{color:'red', fontSize:'14px'}}>Hello world</p>
使用class
React推荐我们使用行内样式,因为React觉得每一个组件都是一个独立的整体。其实我们大多数情况下还是大量的在为元素添加类名,但是需要注意的是,class
需要写成className
(因为毕竟是在写类js代码,会收到js规则的现在,而class
是关键字)
<p className="hello" style = {this.style}>Hello world</p>