React组件精讲-优快云博客

一、介绍

React组件可以将UI切分成一些独立的、可复用的部件，这样有助于设计人员专注于构建每一个单独的部件。React组件通过Props可以接收任意的输入值，因此Props也可以理解为参数的概念。

React语法是基于版本ECMAScript6实现的。因此，React组件除了通过JavaScript函数形式实现，还可以通过ES6 Class(类)的形式来实现。语法如下

 class  reactComponent extends React.Component{            
 		render（）{                 
   		return  <tagName> ......</tagName>          
     	 }       
       }

二、React函数组件

通过JavaScript函数形式实现一个React组件

<div id="app"></div>
    <script type="text/babel">
    // 通过JavaScript函数实现React组件
    var reactdib=document.getElementById('app')
    function HelloReactComp(){
        return <p>我是一个函数组件</p>
    }
    const reactSpan=(
        <span>
         <h3>函数组件</h3> 
         { <HelloReactComp/> }
        </span>
    )
    // 函数名就是组件名称  
    ReactDOM.render(reactSpan,reactdib)
    </script>

另一种写法

<div id="app"></div>
    <script type="text/babel">
    // 通过JavaScript函数实现React组件
    var reactdib=document.getElementById('app')
    function HelloReactComp(){
        return <p>我是一个函数组件</p>
    }
    const element=<HelloReactComp/>
    const reactSpan=(
        <span>
         <h3>函数组件</h3> 
         { element }
        </span>
    )
    // 函数名就是组件名称  
    ReactDOM.render(reactSpan,reactdib)
    </script>

React组件和Props结合使用可以实现更加灵活的功能

三、React类组件

使用HTML5的class来创建组件

<div id="app"></div>
    <script type="text/babel">
    // 通过JavaScript函数实现React组件
    var reactdib=document.getElementById('app')
    // 定义一个类
    class MyReactComp extends React.Component{
        render(){
            return(
                <p>我是一个类组件</p>
            )
        }
    }
    // 使用类组件
    const testDiv=(
        <div>
            <MyReactComp/>
        </div>
    )
        ReactDOM.render(testDiv,reactdib)
    </script>

给类组件增加样式表达式

<div id="app"></div>
    <script type="text/babel">
    // 通过JavaScript函数实现React组件
    var reactdib=document.getElementById('app')
    const css1={
        color:'red',
        fontSize:'14px'
    }
    // 定义一个类
    class MyReactComp extends React.Component{
        render(){
            return(
                <p style={css1}>我是一个类组件</p>
            )
        }
    }
    // 使用类组件
    const testDiv=(
        <div>
            <MyReactComp/>
        </div>
    )
        ReactDOM.render(testDiv,reactdib)
    </script>

四、组合组件

<div id="app"></div>
    <script type="text/babel">
    // 通过JavaScript函数实现React组件
    var reactdib=document.getElementById('app')
    
    // 创建页面的标题组件
    function FormTitle(){
        return <h2>用户登录</h2>
    }
    // 创建用户的id组件
    function UserId(){
        const userid=(
            <p>用户id：<input type="text"/></p>
        )
        return userid
    }
    // 创建用户姓名
    function UserName(){
        const username=(
            <p>用户姓名：<input type="text"/></p>
        )
        return username
    }
    // 创建密码组件
    function UserPass(){
        const password=(
            <p>密码：<input type="password"/></p>
        )
        return password
    }
    // 创建提交按钮组件
    function Submit(){
        const submit=(
            <button>登录</button>
        )
        return submit
    }
    // 定义一个组合组件
    function FormLogin(){
        return(
            <div>
                <FormTitle/>
                <UserId/>
                <UserName/>
                <UserPass/>
                <Submit/>
            </div>
        )
    }
    const reactSpan=(
        <span>
            <FormLogin/>    
        </span>
    )
    ReactDOM.render(reactSpan,reactdib)
    </script>

五、React Props

React框架定义了一个Props，用来传参

1.通过函数组件

<div id="app"></div>
    <script type="text/babel">
    // 通过JavaScript函数实现React组件
    var reactdib=document.getElementById('app')
    function ReactPropsComp(props){
        if(props){
            return <p>我是一个函数组件，接收的参数是{props.name}</p>
        }else
        {
            return <p>函数的参数组件为空</p>
        }
    } 
    const reactSpan=(
        <span>
            <ReactPropsComp name='邦德'/>
        </span>
    )
    ReactDOM.render(reactSpan,reactdib)
    </script>

2.通过类组件

<div id="app"></div>
    <script type="text/babel">
    // 通过JavaScript函数实现React组件
    var reactdib=document.getElementById('app')
    // 定义一个类组件
    class ReactClassComp extends React.Component{
        render(){
            return <div>
                <p>用户名：<input type="text" value={this.props.uname}/></p>
                <p>性别：<input type="text" value={this.props.gender}/></p>
                </div>
        }
    }
    ReactClassComp.defaultProps={
        uname:'刘备',
        gender:'男'
    }
    const resSpan=(
        <span>
            <ReactClassComp/>
        </span>
    )
    ReactDOM.render(resSpan,reactdib)
    </script>

3.props的只读属性

当我们使用props给input复制时，input标签，没有定义onChange 但是提供了value属性。React会抛出警告，并将元素设置为只读。

报错如下：

六、React组件切分与提取

对React组件进行切分并提取逻辑清晰、可复用度高的小组件，可以提升效率

<body>
    <div id="app"></div>
    <script type="text/babel">
    var reactDiv=document.getElementById('app');
    // 定义日期格式化函数
    function formDate(date){
        
        return date.toLocaleDateString();
    }
    //三个对象
    const avatar={
        url:'imgs/bat.png',
        alt:'loading...',
        nickname:'老爷'
    }
    
    const userInfo={
        id:'007',
        name:'蝙蝠侠',
        gender:'男',
        age:59,
        email:'batman@batman.com'
    }

    const date={
        date:formDate(new Date())
    }

    //定义组件
    function Avatar(props){
        return (
            <span className='cssAvatar'>
                <img className='cssAvatarimg'
                src={props.avatar.url}
                alt={props.avatar.alt}/>    
                <p className='p-center'>{props.avatar.nickname}</p>
            </span>
        )
    }

    function UserInfo(props){
        return(
            <span className='cssUserInfo'>
                <p className='p-left'>Id:{props.userInfo.id}</p>
                <p className='p-left'>name:{props.userInfo.name}</p>
                <p className='p-left'>gender:{props.userInfo.gender}</p>
                <p className='p-left'>age:{props.userInfo.age}</p>
                <p className='p-left'>email:{props.userInfo.email}</p>
            </span>
        )
    }

    function UserDetail(props){
        return(
            <div className='cssUserDetail'>
                <Avatar avatar={props.avatar}/>
                <UserInfo userInfo={props.userInfo}/>
                <span className='cssDate'>
                    <p className='p-right'>日期：{props.curdate.date}</p>
                </span>
            </div>
        )
    }

    const reactSpan=(
        <span>
            <h2>React组件的切分和提取</h2>
            <UserDetail avatar={avatar} userInfo={userInfo} curdate={date}/>
        </span>
    )
    ReactDOM.render(reactSpan,reactDiv)
    </script>
</body>