React学习之组件与props

╰+攻爆jí腚メ 2022-11-30 13:00 180阅读 0赞

### **说明：本系列所有demo代码的github地址为：[https://github.com/Brucewu998/react.js-learning][https_github.com_Brucewu998_react.js-learning]，笔者会不断更新这些代码，本篇代码在目录下demo-03文件夹下。** ###

### 组件 ###

组件允许我们将UI拆分为独立可复用的代码片段，并对每个代码片段进行独立构思，并且React的组件接受任意的入参props，即父组件可以利用props向子组件传值，稍后会再做讲解。在React中，有两种方式可以用于创建组件：

**函数组件**，就是以JavaScript函数方式创建的组件，形式如下

function Title(props){
        return <h1>{props.title}</h1>
    }

**ES6 class 组件**，这里采用**ES6** 的 **class **语法来创建一个组件，则上面的函数组件创建为：

class Title extends React.Component{
        constructor(props) {
            super(props); //继承React
        }
    
        render() {
            return <h1>{this.props.Title}</h1>
        }
    }

由[React学习之元素渲染][React]一文，可知组件应当通过ReactDOM.render渲染出来：

ReactDOM.render(
        <Title title="React学习" />,
        document.getElementById("root")
    )

这里关于props传值有必要说明一下，如果直接传一个字符串给title,我们像上面那样写即可，但很多时候我们传值并不一定是字符串，也有可能是一个对象、数组之类，那么这种一般先定义好变量，然后采用JSX语法的一对花括号\{\}进行传值：

let title = "React学习";
    ReactDOM.render(
        <Title title={title} />,
        document.getElementById("root")
    )

上面我们写的组件淡然都是简单的组件，在实际开发的过程中，页面往往是复杂的，需要我们根据UI和功能拆分成不同的组件，然后再组合起来，具体的要根据实际开发需求的情况来实现。

### props ###

前面组件已经解释过，props是React的父组件向子组件传值的一种手段(vue中父组件向子组件传值也是props，仔细比对一下，是不是似曾相识呢)，在React中，props这个值在组件中是不允许被修改的，例如组件部分提到的Title组件，如果在这里多title进行修改：

function Title(props){
        props.title = "666";
        return <h1>{props.title}</h1>;
    }

这样一来React会报错，因为React严格限制props不能更改的规则，所有React组件都会对props进行保护。

在React中，props传输的数据类型是允许定义的，可以利用[props-type][]模块来实现props数据类型的定义、限制及初始化，例如上面的Title组件：

Title.propTypes= {
        title: PropTypes.string //将title设置为字符串类型,非必须
    }
    
    Title.defaultProps = { // 设置默认值
        title: "React.js"
    }

还可以设置该值是必须或者是非必须：

Title.propTypes= {
        title: PropTypes.string.isRequired 
    }

props-type设置值的类型可以参考：[使用 PropTypes 进行类型检查][PropTypes]

本节demo完整代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="../build/react.dev.js"></script>
        <script src="../build/react-dom.dev.js"></script>
        <script src="../build/brower.min.js"></script>
        <script src="../build/prop-types.js"></script>
        <title>Demo-03</title>
    </head>
    <body>
        <div id="demo-3"></div>
        <script type="text/babel">
            class Title extends React.Component {
                constructor(props) {
                    super(props);
                }
                render() {
                    return <h1>{ this.props.title }</h1>
                }
            }
    
            Title.propTypes = {  // 设置props类型和required
                title: PropTypes.string
            }
    
            Title.defaultProps = { // 设置默认值
                title: "React.js学习"
            }
    
            // Title.propTypes= {
            //     title: PropTypes.string.required 
            // }
        
            // 如果title为非string,会报错
            ReactDOM.render(
                <Title />,
                document.getElementById("demo-3")
            )
        </script>
    </body>
    </html>

上一篇：**[React学习之元素渲染][React]**

下一篇：**[React学习之获取真实DOM节点][React_DOM]**

[https_github.com_Brucewu998_react.js-learning]: https://github.com/Brucewu998/react.js-learning
[React]: https://blog.csdn.net/qq_37338983/article/details/108161726
[props-type]: https://www.npmjs.com/package/prop-types
[PropTypes]: https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper
[React_DOM]: https://blog.csdn.net/qq_37338983/article/details/108209357