react的组件&组件的复用（通过props）

最新推荐文章于 2022-05-06 17:06:23 发布

杨不旧

最新推荐文章于 2022-05-06 17:06:23 发布

阅读量900

点赞数

分类专栏： react 文章标签： react.js

本文链接：https://blog.csdn.net/qq_45152044/article/details/124259578

版权

react 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

在react里有两种定义组件的方式
1、函数式组件
2、class类组件

示例代码：

<script type="text/babel">
    //函数式组件
    let ComFn = () => {
        return (
            <div>
                <h1>这个是函数式组件</h1>
            </div>
        )
    }
    //class组件的用法(React.Component就是react文件里面的)
    //我们要声明的组件必须要继承react里面设置的组件父级
    class ComClass extends React.Component {
        render() {
            return (
                <div>
                    <h1>这个是class组件</h1>
                </div>
            )
        }
    }
    let oDiv = <div>
        <h1>jsx基本用法</h1>
        <ComFn></ComFn>
        <ComClass></ComClass>
    </div>;
    //可以单独使用(注意:只会执行一个ReactDOM.render()方法,请不要同时取消注释演示)
    // ReactDOM.render(<ComFn></ComFn>, document.querySelector("#app"));
    // ReactDOM.render(<ComClass></ComClass>, document.querySelector("#app"));
    //可以放在jsx里面渲染使用
    ReactDOM.render(oDiv, document.querySelector("#app"));
</script>

组件的声明
1、函数式组件声明：

let 组件名= () => {
                return (
                    <div>
                        <h1>这个是函数式组件</h1>
                    </div>
                )
}

2、class类组件声明

class 组件名 extends React.Component {
        render() {
            return (
                <div>
                    <h1>这个是class组件</h1>
                </div>
            )
        }
    }

组件使用
当作标签来使用，如：

<ComFn></ComFn>
<ComClass></ComClass>

组件使用注意事项：
1、组件的首字母必须大写
2、组件标签在使用的时候，如果没用内容，可以使用单标签。如<ComFn/>

函数式组件和class组件的区别：

_	有无生命周期	有无状态	有无this	ref(声明一个数据)
函数式组件	没有生命周期	默认函数里面是没有的(加入hook可以有)	没有，加入hooks都能有了	没有，加hooks才有
class类组件	有生命周期	有状态的	有this的，始终指向类	有

组件的复用

和vue一样，都是通过属性来复用的。
示例代码：

<script type="text/babel">
    //函数式组件
    let ComFn = (props) => {
        return (
            <div>
                <h1 style={{ color: props.col }}>这个是函数式组件</h1>
            </div>
        )
    }
    //class组件的用法(React.Component就是react文件里面的)
    //我们要声明的组件必须要继承react里面设置的组件父级
    class ComClass extends React.Component {
        render() {
            return (
                <div>
                    <h1 style={{ color: this.props.col }}>这个是class组件</h1>
                </div>
            )
        }
    }
    let oDiv = <div>
        <h1>这是jsx基本用法</h1>
        <ComFn col="red"></ComFn>
        <ComFn col="blue"></ComFn>
        <ComFn col="pink"></ComFn>
        <ComClass col="red"></ComClass>
        <ComClass col="blue"></ComClass>
    </div>;
    ReactDOM.render(oDiv, document.querySelector("#app"));
</script>

组件复用总结：
1、都是通过属性进行传递的
如：<ComFn col="red"></ComFn>
2、通过props接收

函数式组件声明复用方法：

let ComFn = (props) => {
            return (
                <div>
                    <h1 style={{ color: props.col }}>这个是函数式组件</h1>
                </div>
            )
        }

class组件声明复用方法：

class ComClass extends React.component {
            render() {
                return (
                    <div>
                        <h1 style={{ color: this.props.col }}>这个是class组件</h1>
                    </div>
                )
            }
        }

属性(props)的特点：
1、属性都是只读的
2、不可修改和设置，设置属性只能这么设置：<ComFn col="red"></ComFn>

组件状态

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <!-- react的容器 -->
    <div id="app"></div>
</body>

</html>
<script type="text/babel">


    //class组件的用法(React.component就是react文件里面的)
    //我们要声明的组件必须要继承react里面设置的组件父级
    class ComClass extends React.Component {
        //所有的属性都写在constructor里面
        constructor() {//只要放属性，就必须写，还要写super()
            super();
            //相当于vue里面的data
            this.state = {
                a: 1//定义状态
            }
        }
        setA() {
            //打印出来的this为undefined
            console.log(this);
        }
        setA1 = () => {
            //只有不传参数可以这么玩,参数就傻眼了
            //修改数据
            this.setState({
                a: 2
            })
        }
        setA2(v) {
            // this.setA2.bind  只能这么修改this指向,因为函数名后面必须是函数才可以，bind改变this指向且会变成一个函数
            this.setState({
                a: v
            })
        }
        setA3(v) {
            //可以打印出this
            this.setState({
                a: v
            })
        }
        render() {
            return (
                <div>
                    <h1>这个是class组件</h1>
                    <p>{this.state.a}</p>
                    <button onClick={this.setA}>setA</button>
                    <button onClick={this.setA1}>setA1</button>
                    <button onClick={this.setA2.bind(this, 3)}>setA2</button>
                    <button onClick={() => { this.setA3(4) }}>setA3</button>
                    <button onClick={() => { this.setState({ a: 5 }) }}>直接修改</button>
                </div>
            )

        }
    }
    // <button onClick={setA}> setA定义如果是普通函数，不用this就可以使用，否则this就是undefined</button>
    ReactDOM.render(<ComClass />, document.querySelector("#app"));
</script>

状态的定义

class 组件名 extends React.Components{
        constructor (){
            this.state={
                //写数据
            }
        }
    }

状态的使用
this.state.xxx

状态的修改
this.setState({xxx:xxx})

组件的事件添加

示例代码（可参考组件复用的代码）：

 1、onClick={this.fn}
        fn = () =>{
            //this是对的，但是没办法传参
        }
2、onClick={this.fn.bind(this,参数)}
        fn(v){

        }
3、onClick = {()=>{this.fn(2)}}
        fn(v){

        }

组件生命周期

缩减至三个周期：
componentDidUnmount挂载后
componentDidUpdate 数据更新后
componentWillUnmount 销毁前

组件内的ref

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <style>
        .h1 {
            color: red;
        }

        .div1 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <!-- react的容器 -->
    <div id="app"></div>
</body>

</html>
<script type="text/babel">
    class ComClass extends React.Component {
        constructor() {
            super();
            this.state = {
                a: 1
            }
        }
        fn() {
            //this.refs.div1获取到的是这个div节点
            this.refs.div1.style.background = 'blue';
        }
        render() {
            return (
                <div>
                    <h1>class组件的ref</h1>
                    <button onClick={this.fn.bind(this)}>点击</button>
                    <div ref='div1' className='div1'></div>
                </div>
            )

        }
    }
    ReactDOM.render(<ComClass />, document.querySelector("#app"));
</script>

组件内的事件对象

1、preventDefault() 阻止浏览器默认行为
2、stopPropagation() 阻止冒泡
3、keyCode 必须是onKeyUp里面获取

杨不旧

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
react的组件&组件的复用（通过props）

在react里有两种定义组件的方式1、函数式组件2、class类组件示例代码：<script type="text/babel"> //函数式组件 let ComFn = () => { return ( <div> <h1>这个是函数式组件</h1> </div> ) } //class组件
复制链接

扫一扫