React的组件创建、样式写法、数据的状态和属性、属性验证prop-types

一、组件的创建

1、函数式组件（无状态组件 prueComponent）

import React,{Fragment} from 'react'
function Comp(){
    return (
    	<Fragment>
        	<div>content</div>
        </Fragment>
    )
}
export default Comp
{/*接下来一般在App.js中引入即可*/}

2、类组件

import React,{Component,Fragment} from 'react'
{/*这里要解析jsx就需要引入React，从react.Component中解构出Component*/}
class Comp extends Component{
    render(){
        return (
        	<Fragment>{/*唯一根元素，用Fragment代替一般的div可以在结构上减少一层*/}
                <div>content</div>
            </Fragment>
        )
    }
}
export default Comp
{/*接下来一般在App.js中引入即可*/}

二、四种样式写法：

1、直接在标签里面写样式，类似于行内样式

import React,{Component,Fragment} from 'react'
class Styleone extends Component{
    render(){
        return (
            <Fragment>
                <div style = {{color:'red',}}>这里是第一种样式组件</div>
            </Fragment>
        )
    }
}
export default Styleone

2、引入css样式文件，再在标签上写css样式文件里面的类名，需注意，这里的class是原生，所以要写成className。如果引的是scss或者stylus文件，需要配置webpack文件来编译。

import React,{Component,Fragment} from 'react'
import './style.css'
class Styletwo extends Component{
    render(){
        return (
            <Fragment>
                <div className = "相应类名">这里是第二种样式组件</div>
            </Fragment>
        )
    }
}
export default Styletwo

3、不同的条件，添加不同的样式，使用npmjs官网里面的classname的包文件

安装cnpm i classname -S

{/*这里也要引入对应的样式css文件，样式文件中有许多类名，通过classname函数来选择谁被添加*/}
import React,{Component,Fragment} from 'react'
import classname from 'classname'
import './style.css'
class Stylethree extends Component{
    render(){
        return (
            <Fragment>
                <div
                    className={
                        classname({{/*这classname是一个函数，为true的键就会显示为className的类名*/}
                            one:true,
                            two:false,
                            three:false,
                        })
                    }
                    >
                    这里是第三种样式组件
                </div>
            </Fragment>
        )
    }
}
export default Stylethree

4、利用styled-components这个第三包，需要安装，React认为一切皆组件，所以这里要写样式组件，再引入(推荐)，最后解析到页面，类名是由这个包文件自动分配的，我们再也不用担心类名重复问题

安装：cnpm i styled-components -D

import React,{Component,Fragment} from 'react'
import styled from 'styled-components'
{/*styled后面加的是什么标签，最后这个Container组件就会被解析为什么，且具有模板字符串里面的样式*/}
const Container = styled.div`
	width:100px;
	height:100px;
	background-color:lime;
`

class Stylefour extends Component{
    render(){
        return (
            <Fragment>
                <div>这里是第四种样式组件</div>
                <Container></Container>{/*这个组件会被解析为一个div，且具有上面写的样式*/}
            </Fragment>
        )
    }
}
export default Stylefour

感觉比较强大的是，这种样式组件还可以嵌套，并写入内容、标签等，不用担心像一般的组件一样，即组合组件，里面的不在父组件里面写{this.props.children}会被覆盖的问题

import React,{Component,Fragment} from 'react'
import styled from 'styled-components'
{/*styled后面加的是什么标签，最后这个Container组件就会被解析为什么，且具有模板字符串里面的样式*/}
const Container = styled.div`
	width:300px;
	height:300px;
	background-color:lime;
`
const Warpper = styled.section`
	width:200px;
	height:200px;
	background-color:red;
	div{
		color:yellow;
		font-size:20px;
		width:100px;
		height:100px;
		ul{
			li{
				list-style-type:none;
			}
		}
	}
`
class Stylefour extends Component{
    render(){
        return (
            <Fragment>
                <div>这里是第四种样式组件</div>
                <Container>
                    <Warpper>
                    	<div>
                        	<ul>
                            	<li>任务一</li>
                            	<li>任务二</li>
                            	<li>任务三</li>
                            </ul>
                        </div>
                    </Warpper>
                </Container>{/*这个组件会被解析为一个div，且具有上面写的样式*/}
            </Fragment>
        )
    }
}
export default Stylefour

三、数据之属性和状态

1、属性：

Props 属性: 是描述组件的性质、特征的，组件自身不会轻易改变的

• 外部传入: 在组件的标签形式上以属性的形式绑定即可

比如：在父组件的模板中，子组件的身上写一个name="lzc"
在子组件里面写：{this.props.name}即可展示这个属性数据

• 内部设置

在组件自己的内部（如类组件里面）用关键字：
static defaultProps = {
	info:'爱情来的太快，就像龙卷风',
}
这个属性也会在组件的props上面，可以用{this.props.info}来展示

2、状态：组件自己的状态，只能自己修改，下面两种形式只能选择用一种

• 以实例属性的形式

如：在类组件中写
state = {
	info:'哈哈哈',
}
组件访问的话，直接用 {this.state.info} 即可

• 用constructor构造器的形式(推荐使用) 既有属性又有状态，为React16版本的重大更新

如：在类组件中写,这里props可以不写，默认是props
constructor (props) {
	super(props)  
	this.state = {
		name : 'lzc',
		info : '乐不思蜀',
	}
}
通过super继承了绑定在当前组件上的属性，可以用props访问
而组件的状态用state来访问{this.state.name}
即：构造器形式的里面既有属性，又有状态

在15版本以前
用getDefaultProps(){} 钩子函数来管理属性
用getIntalState(){} 钩子函数来管理状态
现在合并为constructor(){}

四、属性验证：不符合，会警告(这个现在用的不多，因为现在多用React+Ts，而Ts是带检测属性的)

import React, { Component } from 'react'
import PropTypes from 'prop-types'
class Hello extends Component {
  static defaultProps = { // 内部设置属性
    info: 1000
  }
  render () {
    console.log( this )
    return (
      <div>
        <p> 外部传来了一个属性 { this.props.name } </p>
        <p> 内部设置的属性 { this.props.info } </p>
        <div> 组件的内容 { this.props.children } </div>
      </div>
    )
  }
}

Hello.propTypes = {
  info: PropTypes.number
}

export default Hello