React-2

最新推荐文章于 2021-11-17 09:13:09 发布

zcoder.

最新推荐文章于 2021-11-17 09:13:09 发布

阅读量173

点赞数

分类专栏：前端文章标签： react reactjs

本文链接：https://blog.csdn.net/weixin_44585214/article/details/113793911

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、React中的组件

1. 基本概念

组件
一个应用/版块/页面中用于实现某个局部的功能(包括html, js, css等)，把这些局部功能组装到一起就形成了完整的一个大的功能，主要目的在于: 复用代码, 提高项目运行效率。
组件化
如果一个应用是用多组件的方式进行综合开发的，那么这个应用就是一个组件化应用。
模块
多个组件形成模块，或者是一个提供特定功能的 js 文件, 主要特点在于耦合性低，可移植性高，执行效率好。
模块化
如果一个应用都是用模块的形式来构建的，那么这个应用就是模块化应用。

2. 组件的创建方式

1）概念：虚拟DOM对象的集合，将一组虚拟DOM对象，封装在一起，就构成了一个组件。组件内部可以处理数据和业务逻辑。

2）组件的创建方式：

构造函数创建组件

	function Test() {
	   return <div>xxx</div>
	}

    // 多组件
    function Header() {
        return (
            <header>头部</header>
        )
    }
    function Content() {
        return (
            <section>内容</section>
        )
    }
    function Footer() {
        return (
            <footer>尾部</footer>
        )
    }
    function Article() {
        return (
            <div>
                <Header/>
                <Content/>
                <Footer/>
            </div>
        )
    }
    ReactDOM.render(<Article/>, root);

组件类创建组件

class Test extends React.Component {
   render() {
       return <div>xxx</div>
   }
}

2. 组件的注意事项

组件名称首字母必须大写，只有大写才会被识别成组件。
虚拟DOM 必须有且只有一个根元素。

3. ReactDOM.render()的渲染流程

判定渲染的内容是否是组件(包含组件)，判断依据：首字母是否大写。
如果是组件
判断是工厂函数，获取它返回值，虚拟DOM对象。
判断是组件类，调用其render() 获取，虚拟DOM对象。
将虚拟DOM对象, 转换为真实DOM。
插入到真实的DOM容器中。

二、向组件传值-props

在书写组件标签时，直接加自定义属性：<组件属性=“值”></组件>

组件内部：

1. 构造函数

 在构造函数的参数列表中使用props来接收。

    function Person(props) {
        return (
            <div>
                <h2>
                    我是: {props.name},
                    性别: {props.sex},
                    我有3个爱好: {props.hobby}
                </h2>
            </div>
        );
    }
    ReactDOM.render(<Person name="西西" sex="男" hobby={["打篮球", "打排球", "踢足球"]}/>, root);

 默认的props设置：通过 defaultProps属性 为 props 设置默认值。

    function Shop(props) {
        return (
            <div>
                <a href={props.link}>{props.name}</a>
            </div>
        )
    }
    
    // 设置属性的默认值
    Shop.defaultProps = {
        name: "百度网站",
        link: "http://www.baidu.com"
    };

    // ReactDOM.render(<Shop name="京东商城" link="http://www.jd.com"/>, root);
    ReactDOM.render(<Shop/>, root);

  props验证：props 验证使用 propTypes，它可以保证我们的应用组件被正确使用。
  当向 props 传入无效数据时，JavaScript 控制台会抛出警告。
  通过 propTypes属性 为props添加验证。

    // 约定属性的类型
    Shop.propTypes = {
        name: PropTypes.string.isRequired,
        link: PropTypes.string
    };

2. 组件类

 使用this.props来获取参数。

    class Person extends React.Component {
        render() {
            return (
                <div>
                    <h2>姓名: {this.props.name}</h2>
                    <h2>年龄: {this.props.age}</h2>
                    <ul>
                        {
                            this.props.hobby.map((item, index) => (<li key={index}>{item}</li>))
                        }
                    </ul>
                </div>
            )
        }
    }
    ReactDOM.render(<Person name="西西" age="22" hobby={["篮球", "足球", "乒乓球"]}/>, root);

 默认的props设置：通过 defaultProps 为props设置默认值。

   class Shop extends React.Component {
       static defaultProps = {
           name: "百度网站",
           link: "http://www.baidu.com"
       };
       render() {
           return (
               <div>
                   <a href={this.props.link}>{this.props.name}</a>
               </div>
           )
       }
   }

    // ReactDOM.render(<Shop name="京东商城" link="http://www.jd.com"/>, root);
    ReactDOM.render(<Shop/>, root);

  props验证：通过 propTypes 为props添加验证。

   static propTypes = {
       name: PropTypes.string.isRequired,
       link: PropTypes.string
   };

三、组件内的状态机-state

1. 什么是state?

React 把组件看成是一个状态机（State Machines），通过状态 (State) 去操作状态机。
在开发中，通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
在React 中，只需更新组件的 state，然后根据新的 state 重新渲染用户界面，只要修改state，那么界面就会自动重新渲染，再次执行render()。

2. state注意事项

不能直接修改state，需要通过setState方法，此方法内部给出的对象，会增量更新到原state，并不会替换原state。
状态数据封装在组件内部，不要在外界访问。
多次state数据"同时修改"，会被合并，更新一次。
构造函数创建的组件叫：无状态组件；组件类创建的组件叫；有状态组件；有状态组件与无状态组件的本质区别在于是否有state（状态）属性。

3. state与props区别

props是指组件间传递值的一种方式。
组件内部的this.props属性是只读的不可修改的（如果props后面是一个对象，那么这个对象的属性是可以修改的，是一种浅拷贝机制）。
state是组件内部的状态(数据)，不能够直接修改，必须要通过setState来改变值的状态。

4. setState是异步的

在同一个地方使用setState, 会合并去取最后一次

import React from 'react'

export default class Like012 extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            count: 0
        }
    }

    componentDidMount() {
       /*
       this.setState({
            count: this.state.count + 1
        });
        this.setState({
            count: this.state.count + 2
        });
        this.setState({
            count: this.state.count + 3
        });
        this.setState({
            count: this.state.count + 4
        });
        */

        this.setState({
            count: this.state.count + 1
        }, () => {
            console.log(this.state.count);
        });
        this.setState((prevState, prevProps) => ({
            count: prevState.count + 2
        }));
        this.setState((prevState, prevProps) => ({
            count: prevState.count + 3
        }));

        console.log(this.state.count);
    }

    render() {
        const { count } = this.state;
        return (
            <div>
                { count }
            </div>
        )
    }
}

四、组件的事件

1. 组件的事件处理

React 事件绑定属性的命名采用驼峰式写法，而不是小写。

2. 组件的事件阻止

不能使用返回 false 的方式阻止默认行为，明确的使用 preventDefault。

3. 事件方法中的this

箭头函数中的this是在定义函数时绑定，且内部无this，参照上下文确定this。
普通函数是在执行函数时绑定，内部有this，谁执行就是谁。

4. 事件方法中传参

使用箭头函数。

五、表单的联动处理

问题：表单字段内容的值，使用state进行绑定，导致表单字段，用户无法修改。
原因：值是获取的state中的数据，数据不变，界面不会被渲染。
解决：监听onChange事件，获取event.target.value，反向的设置到state，控制数据变更。

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

            this.state = {
                content: '默认内容'
            };
        };

        render() {
            return (
                <div>
                    <label>
                        <input type="text" value={ this.state.content } onChange={(e) => this._dealChange(e)}/>
                        <button onClick={() => this._getData()}>获取输入框中的值</button>
                    </label>
                </div>
            )
        };

        _dealChange(e) {
            console.log(e.target.value);
            this.setState({
                content: e.target.value
            });
        };

        _getData() {
            alert(this.state.content);
        }
    }
    ReactDOM.render(<AddPanel/>, root);

六、ref的使用

1）概念：Refs 提供了一种方式，用于访问在 render 方法中创建的 DOM 节点或 React 元素。
2）使用场景：

处理焦点、文本选择或媒体控制
触发强制动画
集成第三方 DOM 库

3）注意：如果可以通过声明式实现，就尽量避免使用 refs（React无法控制局面的时候，就需要直接操作Refs了）。

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

            // 绑定ref
            this.ref1 = React.createRef();
            this.ref2 = React.createRef();
        };

        render() {
            return (
                <div>
                    <label>
                        <input ref={ this.ref1 } type="text" placeholder="请输入内容"/>
                        <input ref={ this.ref2 } type="button" value="获取焦点" onClick={() => {this._dealFocus()}}/>
                    </label>
                </div>
            )
        };

        _dealFocus() {
            this.ref1.current.focus();
        };

    }
    ReactDOM.render(<AddPanel/>, root);

七、组件的嵌套组合

在一个组件内部，可以直接嵌入另外一个组件，最终都会被babel进行转化，转变为对应层级关系的虚拟DOM对象，然后再渲染为真实DOM对象。

zcoder.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React-2

React-2一、React中的组件1. 基本概念2. 组件的创建方式2. 组件的注意事项3. ReactDOM.render()的渲染流程二、向组件传值-props1. 构造函数2. 组件类三、组件内的状态机-state1. 什么是state?一、React中的组件1. 基本概念组件一个应用/版块/页面中用于实现某个局部的功能(包括html, js, css等)，把这些局部功能组装到一起就形成了完整的一个大的功能，主要目的在于: 复用代码, 提高项目运行效率。组件化如果一个应用是用多组件的
复制链接

扫一扫