版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
React组件
含义:html、css、js代码的集合
1.工厂函数组件(简单组件)
function Simple(){
return <h1>简单组件</h1>
}
ReactDOM.render(<Simple/>,document.getElementById('app'));
2.ES6类组件(复杂组件)
class Complex extends React.Component{
render(){
return(
<h1>复杂组件<h1/>
)
}
}
ReactDOM.render(<Complex/>,document.getElementById('root'))
注意点:
1.自定义组件首字母必须大写
2.return中只能有一个根标签
3.每个标签必须有闭合标签
##组件两大属性 State&Prop
State
class Complex extends React.Component{
constructor(props){
super(props)
this.setState({
msg:"hhhhhh"
})
}
render(){
// ES6语法
// const 变量的值只读不可修改
const {msg} = this.state
return(
<h1>{msg}<h1/>
)
}
}
1.state中值是只读的,修改state中值需要使用setState({})
2.jsx回调中this指向是undefined,修改this指向方法
方式一 直接在绑定事件时bind
class Complex extends React.Component{
click(){
// do something
}
render(){
return(
<h1 onClick={this.click.bind(this)}>复杂组件<h1/>
)
}
}
方式二 在构造函数中bind
class Complex extends React.Component{
constructor(props){
super(props)
this.click:this.click.bind(this)
}
click(){
// do something
}
render(){
return(
<h1 onClick={this.click}>复杂组件<h1/>
)
}
}
方式三 箭头函数
class Complex extends React.Component{
click=()=>{
// do something
}
render(){
return(
<h1 onClick={this.click}>复杂组件<h1/>
)
}
}
调用setState不一定会重新渲染,与生命周期有关
props
props外部传入值:以属性方式,以对象整体方式
class Complex extends React.Compnent{
constructor(props){
super(props)
}
render(){
obj = this.props
return
// something
}
}
let person = {
name:"sss",
age:17
}
//整个对象的形式
ReactDOM.render(<Complex {...person}/>,document.getElementById('root'))
// 单个属性
ReactDOM.render(<Complex name={person.name}/>,document.getElementById('root'))
类型检验
// 引入文件
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
// 类型检验
Complex.propTypes={
name:PropTypes.string.isRequired
}
// 设置默认值
Complex.defaultProps={
sex:"男",
age:"18"
}