React笔记:组件(3)

1. 组件定义

  组件是React的核心概念,组件将应用的UI拆分成独立的、可复用的模块。

  定义组件的两种方式:

  (1)类组件:使用ES6 class

  (2)函数组件:使用函数

  使用class定义组件的两个条件:

  (1)class继承自React.Component

  (2)class内部必须定义render(),render()返回代表该组件UI的React元素。

1.1 基本组件

  HelloWorld.js:

import React, { Component } from "react"

class HelloWorld extends Component {
    render() {
        return ( 
            <h1>Hello World!</h1>
        );
    }
}

export default HelloWorld;

  Index.js:

import React from 'react';
import ReactDOM from 'react-dom';

import HelloWorld from './components/HelloWorld'

ReactDOM.render(<HelloWorld />, document.getElementById('root'));

  说明:ReactDOM.render()需要先导入react-dom库,这个库会完成组件所代表的虚拟DOM节点到浏览器的DOM节点的转换。

     使用export default默认导出组件。

     default表示可以在别的文件中使用import HelloWorld from './components/HelloWorld'导入这个模块;

     如果没有default,则需要使用import { HelloWorld } from './components/HelloWorld'来导入模块。

1.2 组件的props

  组件props用于把父组件中的数据或方法传递给子组件。

  props是一个简单结构的对象,它包含的属性是由组件作为JSX标签所使用的属性组成。

  示例(1):

import React, { Component } from "react"

class HelloWorld extends Component {
    render() {
        return ( 
            <h1>Hello { this.props.name }!</h1>
        );
    }
}

export default HelloWorld;
import React from 'react';
import ReactDOM from 'react-dom';

import HelloWorld from './components/HelloWorld'

ReactDOM.render(<HelloWorld name={ 'Libing' } />, document.getElementById('root'));

  示例(2):

  TodoItem.js

import React, { Component } from 'react';

class TodoItem extends React.Component {
    render() {
        const { id, title } = this.props;
        
        return (
            <li>{ id }-{ title }</li>
        );
    }
}

export default TodoItem;

  TodoList.js

import React, { Component } from 'react';

import TodoItem from './TodoItem';

const data = [
    { id: 1, title: 'ToDo' },
    { id: 2, title: 'In Progress' },
    { id: 3, title: 'Done' }
]

class TodoList extends Component {
    render() {
        return ( 
            <ul>
            {
                data.map((item) =>
                    <TodoItem
                        id={ item.id }
                        title={ item.title }
                    />
                )
            } 
            </ul>
        );
    }
}

export default TodoList;

  index.js

import React from 'react';
import ReactDOM from 'react-dom';

import TodoList from './components/TodoList'

ReactDOM.render(<TodoList />, document.getElementById('root'));

1.3 组件的state

  组件的state是组件内部的姿态,state的变化最终将反映在组件UI的变化。

  在组件的构造方法constructor中通过this.state定义组件的初始状态,并通过调用this.setState()改变组件状态,进而组件UI会随之重新渲染。

  修改TodoItem.js

import React, { Component } from 'react';

class TodoItem extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 0
        };
    }

    handleClick() {
        let count = this.state.count;
        count++;

        this.setState({
            count: count
        });
    }

    render() {
        const { id, title } = this.props;

        return (
            <li>
                { id }-{ title }-{ this.state.count }
                <button
                    onClick={() => {
                        this.handleClick();
                    }}
                >+1</button>
            </li>
        );
    }
}

export default TodoItem;

1.4 有状态组件和无状态组件

  state用来反映组件内部状态的变化。

  无状态组件:如果一个组件的内部状态是不变的,则用不到state。

  有状态组件:如果一个组件的内部状态会发生变化,就需要使用state来保存变化。

  示例:

  HelloWorld.js

import React from 'react';

function HelloWorld(props) {
    return <h1>Hello { props.name }!</h1>;
}

export default HelloWorld;

  注:由于使用了JSX,需要导入React。

  index.js

import React from 'react';
import ReactDOM from 'react-dom';

import HelloWorld from './components/HelloWorld'

ReactDOM.render(<HelloWorld name={ 'World' } />, document.getElementById('root'));

  在使用无状态组件时,尽量定义函数组件。

  在开发React应用时,要先思考哪些组件应该设计成有状态组件,哪些组件应该设计成无状态组件。并且,尽可能多的使用无状态组件,无状态组件不用关心状态变化,只聚焦于UI的展示,更容易复用。

  React应用组件设计的一般思路:通过定义少数的有状态组件管理整个应用的状态变化,并且将状态通过props传递给其余的无状态组件,由无状态组件完成页面绝大部分UI的渲染。

  有状态组件主要关注处理状态变化的业务逻辑,无状态组件主要关注组件的UI渲染。

1.5 属性校验和默认属性

1.5.1 属性校验

  React提供PropTypes用于校验组件属性的类型。

import React from 'react';
import PropTypes from 'prop-types'

class HelloWorld extends React.Component {
    render(){
        return (<h1>Hello { this.props.name }!</h1>);
    }
}

HelloWorld.propTypes = {
    name: PropTypes.string
}

export default HelloWorld;
import React from 'react';
import ReactDOM from 'react-dom';

import HelloWorld from './components/HelloWorld'

ReactDOM.render(<HelloWorld name={'World'} />, document.getElementById('root'));

  若属性类型设置number,则报错提示。

import React from 'react';
import PropTypes from 'prop-types'

class HelloWorld extends React.Component {
    render(){
        return (<h1>Hello { this.props.name }!</h1>);
    }
}

HelloWorld.propTypes = {
    name: PropTypes.number
}

export default HelloWorld;

import React from 'react';
import PropTypes from 'prop-types'

class HelloWorld extends React.Component {
    render(){
        return (<h1 style={ this.props.style }>Hello { this.props.name }!</h1>);
    }
}

HelloWorld.propTypes = {
    name: PropTypes.string,
    style: PropTypes.shape ({
        color: PropTypes.string,
        fontSize: PropTypes.number
    }).isRequired
}

export default HelloWorld;
import React from 'react';
import ReactDOM from 'react-dom';

import HelloWorld from './components/HelloWorld'

ReactDOM.render(<HelloWorld
    style={{ color: 'red', fontSize: 14 }}
    name={'World'}
/>, document.getElementById('root'));

  示例中,style是一个对象,包含两个属性color和fontSize,color是字符串类型,fontSize是数字类型。

  如果属性是组件的必须属性,在PropTypes的类型属性上调用isRequired。

1.5.2 默认属性

  React提供为组件属性指定默认值,组件defaultProps。当组件属性未被赋值时,组件会使用defaultProps定义的默认属性。

import React from 'react';

class HelloWorld extends React.Component {
    render(){
        return (<h1 style={ this.props.style }>Hello { this.props.name }!</h1>);
    }
}

HelloWorld.defaultProps = {
    name: 'Libing'
}

export default HelloWorld;
import React from 'react';
import ReactDOM from 'react-dom';

import HelloWorld from './components/HelloWorld'

ReactDOM.render(<HelloWorld />, document.getElementById('root'));

1.6 组件样式

  为组件添加样式的方法主要有两种:外部样式表和内联样式。

1.6.1 外部CSS样式表

  样式表引入的两种方式:

  (1)在使用组件的HTML页面中通过标签引入

<link rel="stylesheet" type="text/css" href="style.css" >

  (2)把样式表当作一个模块,在使用该样式表的组件中,导入样式表文件

import './style.css'; // 相对路径

  React元素要使用className代替class作为选择器。

  /src/components/HelloWorld.css

.hello-world {
    color: red;
    font-size: 14px;
}

  /src/components/HelloWorld.js

import React from 'react';

import './HelloWorld.css';

class HelloWorld extends React.Component {
    render(){
        return (<h1 className='hello-world'>Hello World!</h1>);
    }
}

export default HelloWorld;

  第一种引入样式表的方式常用于该样式表作为整个应用的所有组件(基础样式表),第二种引入样式表的方式常用于该样式表作用于某个组件(组件的私有样式)。

  全局基础样式表要可以使用第二种方式引入,一般在应用的入口js文件中引入,如index.js。

1.6.2 内联样式

  内联样式是一种CSS in JS的写法:将CSS写到JS文件中,用JS对象表示CSS,通过DOM类型节点的style属性引用样式对象。

import React from 'react';

class HelloWorld extends React.Component {
    render(){
        return (<h1 style={{
            color: 'red',
            fontSize: '14px'
        }}>Hello World!</h1>);
    }
}

export default HelloWorld;

  style使用了两个大括号{{}},第一个大括号表示style的值是一个JavaScript表达式,第二个大括号表示这个JavaScript表达式是一个对象。

import React from 'react';

class HelloWorld extends React.Component {
    render(){
        const style = {
            color: 'red',
            fontSize: '14px'
        };
    
        return (<h1 style={ style }>Hello World!</h1>);
    }
}

export default HelloWorld;

2. 组件生命周期

posted @ 2019-01-16 20:53 libingql 阅读(...) 评论(...) 编辑 收藏