react（三）组件

最新推荐文章于 2024-06-21 09:33:29 发布
最新推荐文章于 2024-06-21 09:33:29 发布
阅读量241 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： react 前端知识 文章标签： component react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_21955179/article/details/82888276

一、组件定义的方式

组件定义有两种方式：

  • es5原生方式React.createClass定义的组件
  • es6形式的extends React.Component定义的组件
    我们只关注第二种方式

例子：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class Header extends Component {
    render () {
        return (
            <div>
                <h1>Hello React </h1>
            </div>
        )
    }
}

ReactDOM.render(
    <Header />,
    document.getElementById('container')
)

二、render方法（render单词的含义为“着色”之意）

一个组件类必须要实现一个 render 方法，这个 render 方法必须要返回一个 JSX 元素。

2.1、必须要用一个外层的 JSX 元素把所有内容包裹起来。

即：

...
render () {
  return (
    <div>div1</div>
    <div>div2</div>
  )
}
...

是不合法的。

2.2、表达式插入

在 JSX 当中你可以插入 JavaScript 的表达式，表达式返回的结果会相应地渲染到页面上。表达式用 {} 包裹

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

const name = "world~~~~";
class Header extends Component {

    render () {
        return (
            <div>
                <h1>hello {name}</h1>
            </div>
        )
    }
}

ReactDOM.render(
    <Header />,
    document.getElementById('container')
)

也可以是个函数返回值：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

function hello() {
    return "hello my world!";
}

class Header extends Component {

    render () {
        return (
            <div>
                <h1>{hello()}</h1>
            </div>
        )
    }
}

ReactDOM.render(
    <Header />,
    document.getElementById('container')
)

简而言之，{} 内可以放任何 JavaScript 的代码，包括变量、表达式计算、函数执行等等。 render 会把这些代码返回的内容如实地渲染到页面上，非常的灵活。

表达式插入不仅仅可以用在标签内部，也可以用在标签的属性上

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

let className ="div1";

class Header extends Component {

    render () {
        return (
            <div className={className}>
                <h1>{hello()}</h1>
            </div>
        )
    }
}

ReactDOM.render(
    <Header />,
    document.getElementById('container')
)

2.3、JSX 元素变量

JSX 元素其实可以像 JavaScript 对象那样自由地赋值给变量，或者作为函数参数传递、或者作为函数的返回值。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

let div = <div>我的div~~</div>

class Header extends Component {

    render () {
        return (
            <div className={className}>
                <h1>{div}</h1>
            </div>
        )
    }
}

ReactDOM.render(
    <Header />,
    document.getElementById('container')
)

三、组件

3.1、自定义组件嵌套

主文件

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import MyHeader from "./Header";
import MyBody from "./Body";
import MyFooter from "./Footer";

class Index extends Component {

    render () {
        return (
           <div>
               <MyHeader/>
               <MyBody/>
               <MyFooter/>
           </div>
        )
    }
}

ReactDOM.render(
    <Index />,
    document.getElementById('container')
)

引用组件

Mybody

import React, {Component} from 'react';
export default class MyBody extends Component {
    render() {
        return (<div><h2>我是BODY!!!</h2></div>)
    }
}

MyFooter

import React, {Component} from 'react';
export default class MyFooter extends Component {
    render() {
        return (<div><h3>我是Footer!!!</h3></div>)
    }

}

MyHeader

   import React, {Component} from 'react';
    export default class MyHeader extends Component {
        render() {
            return (<div><h1>我是HEADER!!!</h1></div>)
        }
    }

3.2、事件

3.2.1、监听事件

React.js 帮我们封装好了一系列的 on* 的属性，当你需要为某个元素监听某个事件的时候，只需要简单地给它加上 on* 就可以了。而且你不需要考虑不同浏览器兼容性的问题，React.js 都帮我们封装好这些细节了。
没有经过特殊处理的话，这些 on* 的事件监听只能用在普通的 HTML 的标签上，而不能用在组件标签上。也就是说，< Header onClick={…} /> 这样的写法不会有什么效果的。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

function functionClick() {
    alert("click event");
}

class Index extends Component {

    render () {
        return (
           <div>
               <p onClick={functionClick}>~~~~~</p>
           </div>
        )
    }
}

ReactDOM.render(
    <Index />,
    document.getElementById('container')
)

3.2.2、获取event对象

和普通浏览器一样，事件监听函数会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致。不同的是 React.js 中的 event 对象并不是浏览器提供的，而是它自己内部所构建的。React.js 将浏览器原生的 event 对象封装了一下，对外提供统一的 API 和属性，这样你就不用考虑不同浏览器的兼容性问题。这个 event 对象是符合 W3C 标准（ W3C UI Events ）的，它具有类似于event.stopPropagation、event.preventDefault 这种常用的方法。

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

function functionClick(e) {
    alert(e.target.innerHTML);
}

class Index extends Component {
    render() {
        return (
            <div>
                <p onClick={functionClick}>~~~~~</p>
            </div>
        )
    }
}

ReactDOM.render(
    <Index/>,
    document.getElementById('container')
)

3.2.3、事件中的this

React.js 调用你所传给它的方法的时候，并不是通过对象方法的方式调用（this.functionClick），而是直接通过函数调用 （functionClick），所以事件监听函数内并不能通过 this 获取到实例。

如果你想在事件函数当中使用当前的实例，你需要手动地将实例方法 bind 到当前实例上再传入给 React.js。

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class Index extends Component {
functionClick(e) {
        console.log(this);
    }
    render() {
        return (
            <div>
                <p onClick={this.functionClick.bind(this)}>~~~~~</p>
            </div>
        )
    }
}
ReactDOM.render(
    <Index/>,
    document.getElementById('container')
)

3.3.4、组件的状态控制： state 和 setState

3.3.4.1、state

一个组件的显示形态是可以由它数据状态和配置参数决定的。一个组件可以拥有自己的状态，就像一个点赞按钮，可以有“已点赞”和“未点赞”状态，并且可以在这两种状态之间进行切换。React.js 的 state 就是用来存储这种可变化的状态的。

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
class Index extends Component {
    constructor() {
        super();
        this.state = {isLiked: false};
    }

    changeState() {
        this.setState({
            isLiked: !this.state.isLiked
        })

    }

    render() {
        return (
            <div>
                <button onClick={this.changeState.bind(this)}>{this.state.isLiked ? '取消' : '点赞'}</button>
            </div>
        )
    }
}
ReactDOM.render(
    <Index/>,
    document.getElementById('container')
)

isLiked 存放在实例的 state 对象当中，这个对象在构造函数里面初始化。这个组件的 render 函数内，会根据组件的 state 的中的isLiked不同显示“取消”或“点赞”内容。并且给 button 加上了点击的事件监听。

3.3.4.2、setState

setState 接受对象参数
在 changeState 事件监听函数里面，大家可以留意到，我们调用了 setState 函数，每次点击都会更新 isLiked 属性为 !isLiked，这样就可以做到点赞和取消功能。

setState 方法由父类 Component 所提供。当我们调用这个函数的时候，React.js 会更新组件的状态 state ，并且重新调用 render 方法，然后再把 render 方法所渲染的最新的内容显示到页面上。

注意，当我们要改变组件的状态的时候，不能直接用 this.state = xxx 这种方式来修改，如果这样做 React.js 就没办法知道你修改了组件的状态，它也就没有办法更新页面。所以，一定要使用 React.js 提供的 setState 方法，它接受一个对象或者函数作为参数。
setState 回调函数
这里还有要注意的是，当你调用 setState 的时候，React.js 并不会马上修改 state。而是把这个对象放到一个更新队列里面，稍后才会从队列当中把新的状态提取出来合并到 state 当中，然后再触发组件更新。
修改我们上面的changeState方法：

    changeState() {
        console.log(this.state.isLiked)
        this.setState({
            isLiked: !this.state.isLiked
        })
        console.log(this.state.isLiked)

    }

在函数执行时，会出现连续打印两个true或者两个false，而不是向我们预想的那样true、false交替打印。
我们可以使用回调函数，来解决

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class Index extends Component {
    render() {
        return (
            <div>
                <button onClick={this.changeState.bind(this)}>{this.state.isLiked ? '取消' : '点赞'}</button>
            </div>
        )

    }

    constructor() {
        super();
        this.state = {isLiked: false};
    }

    changeState() {
        console.log(this.state.isLiked)
        this.setState({
            isLiked: !this.state.isLiked
        }, () => {
            console.log("callback")
            console.log(this.state.isLiked)
        })
        console.log(this.state.isLiked)

    }
}
ReactDOM.render(
    <Index/>,
    document.getElementById('container')
)

setState 接受函数参数（获取上一个state值）
当参数是函数的时候， setState() 会将上一个 setState() 的结果作为参数传入这个函数

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class Index extends Component {
    render() {
        return (
            <div>
                <button onClick={this.changeState.bind(this)}>{this.state.isLiked ? '取消' : '点赞'}</button>
            </div>
        )

    }

    constructor() {
        super();
        this.state = {isLiked: false};
    }

    changeState() {
        this.setState((preState)=>{
            console.log("上一个状态是"+preState.isLiked)
            return {isLiked: !preState.isLiked}
        },()=>{
            console.log("回调函数调用，当前状态是"+this.state.isLiked)
        })

    }
}
ReactDOM.render(
    <Index/>,
    document.getElementById('container')
)

3.3.5、组件的显示控制：props

React中的数据流是单向的，只会从父组件传递到子组件。属性props（properties）是父子组件间进行状态传递的接口，React会向下遍历整个组件树，并重新渲染使用这个属性的组件。

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class Child extends Component {


    render() {

        return <div style={{backgroundColor: this.props.divColor}}>i'm child~~</div>;

    }
}

class Parent extends Component {


    constructor() {
        super();
    }


    render() {
        return (
            <div>
                <Child divColor ='red'/>
            </div>
        )

    }

}


ReactDOM.render(
    <Parent/>,
    document.getElementById('container')
)

在使用props的时候，我们在组件外像在用普通的 HTML 标签的属性一样，可以把参数放在表示组件的标签上，组件内部就可以通过 this.props 来访问到这些配置参数了。
例如：

 <Child divColor ='red'/>

组件内，props不能更改，只能访问，组件内部是通过 this.props 的方式获取到组件的参数。
默认props

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class Child extends Component {

    static defaultProps = {
        divColor: 'blue'
    }

    render() {

        return (
            <div style={{backgroundColor: this.props.divColor}}>i'm child~~</div>
        )

    }
}

class Parent extends Component {


    constructor() {
        super();
    }


    render() {
        return (
            <div>
                <Child/>
            </div>
        )

    }

}
ReactDOM.render(
    <Parent/>,
    document.getElementById('container')
)

我们可以使用 static defaultProps 给props一个默认的值：

    static defaultProps = {
        divColor: 'blue'
    }

React.js 希望一个组件在输入确定的 props 的时候，能够输出确定的 UI 显示形态。如果 props 渲染过程中可以被修改，那么就会导致这个组件显示形态和行为变得不可预测，这样会可能会给组件使用者带来困惑。

但这并不意味着由 props 决定的显示形态不能被修改。组件的使用者可以主动地通过重新渲染（setState）的方式把新的 props 传入组件当中，这样这个组件中由 props 决定的显示形态也会得到相应的改变。

3.3.6、state和props区别

state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState 方法进行更新，setState 会导致组件的重新渲染。

props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props，否则组件的 props 永远保持不变。

state 和 props 有着千丝万缕的关系。它们都可以决定组件的行为和显示形态。一个组件的 state 中的数据可以通过 props 传给子组件，一个组件可以使用外部传入的 props 来初始化自己的 state。但是它们的职责其实非常明晰分明：state 是让组件控制自己的状态，props 是让外部对组件自己进行配置。

如果你觉得还是搞不清 state 和 props 的使用场景，那么请记住一个简单的规则：尽量少地用 state，尽量多地用 props。

3.3.6、共享状态提升

使用 react 经常会遇到几个组件需要共用状态数据的情况。比如我们想要通过一个子组件来改变一个父容器组件中另一个子组件的值。这种情况下，我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理。
下面就是例子：
渲染两个input，改变其中一个input的值，另一个也会同步改变

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class Child extends Component {

    render() {

        const parentMethod = this.props.onChange;
        const value = this.props.value;

        return (

            <div>
                <input type={'text'} onChange={this.transmitChangeValue.bind(this,parentMethod)} value={value}/>
                <br></br>
            </div>

    );
        
    }

    transmitChangeValue(parentMethod,event) {
        event.persist();
        console.log(event);
        let text = event.target.value;
        parentMethod(text);
    }
}

class Parent extends Component {


    constructor() {
        super();
        this.state ={
            value:"初始value"
        }
    }

    onChange(text){
        this.setState({
            value:text
        });
    }

    render() {
        return (
            <div>
                <Child onChange={this.onChange.bind(this)} value={this.state.value}/>
                <Child onChange={this.onChange.bind(this)} value={this.state.value}/>
            </div>
        )

    }

}

ReactDOM.render(
    <Parent/>,
    document.getElementById('container')
)

共享状态提升的核心有以下几点：

  • 父组件中需要定义一个改变state的函数
  • 父组件调用子组件的时候需要将改变state的函数以及对象引用通过props传递给子组件
  • 子组件在改变共享状态的时候，需要通过调用父组件传递过来的函数，来改变父组件的state值

这样就会形成一个链：
某个子组件改变了共享状态-》通知父组件改变state-》父组件state改变，重新渲染各个子组件-》其他子组件共享了状态，同步改变

React Native使用原生组件
xiangzhihong8的专栏
01-08 1716
概述有时候App需要访问平台API，但React Native可能还没有相应的模块包装；或者你需要复用一些Java代码，而不是用Javascript重新实现一遍；又或者你需要实现某些高性能的、多线程的代码，譬如图片处理、数据库、或者各种高级扩展等等。 我们知道React Native本身对这种偏业务和底层调用是不关心的，这时候我们就想到了原生组件，我们通过调用原生组件，然后经过特定的封装来达到效果
react-native入门之核心组件与原生组件
蛐蛐的博客
04-04 554
文档：https://reactnative.cn/docs/intro-react-native-components 1.简介 React Native 是一个使用React和应用平台的原生功能来构建 Android 和 iOS 应用的开源框架。 通过 React Native，您可以使用 JavaScript 来访问移动平台的 API，以及使用 React 组件来描述 UI 的外观和行为：一系列可重用、可嵌套的代码。 2.视图（Views）与移动开发 在 Androi...
深度探索React Native原生UI组件库 - 构建流畅且高效的应用体验
最新发布
gitblog_00074的博客
06-21 895
???? 深度探索React Native原生UI组件库 - 构建流畅且高效的应用体验 目录: 项目介绍 技术深度解析 应用场景展示 独特优势剖析 ???? 项目介绍 在现代移动应用开发领域中，追求极致的用户体验与高效率的开发流程成为了每个开发者心中的圣杯。为满足这一需求，我们荣幸地介绍一款集众多原生UI组件于一体的React Native宝藏库。此项目不仅涵盖了从基本的滚动视图到复杂的下拉刷新控件，...
react15-源码演化-渲染原生组件（一）
zhaofanjack的专栏
04-12 475
渲染原生组件 该文介绍前提，已经通过create-react-app初始化项目。 由于React本身也是不断演化出来的产品，因此该文的源码跟官方不完全一致。 意义在于核心思想、大部分核心写法，跟官方react16大体一致，便于理解分析React源码。 该文是一个演化的过程，重点在于，如何一步步演化推导出react16 1. React.createElement 1.1. src/index....
从 0 到 1 实现 react - onChange 事件以及受控组件
weixin_34008933的博客
09-18 377
该系列文章在实现 cpreact 的同时理顺 React 框架的核心内容 项目地址 从一个疑问点开始 接上一章 HOC 探索 抛出的问题 ———— react 中的 onChange 事件和原生 DOM 事件中的 onchange 表现不一致，举例说明如下： // React 中的 onChange 事件 class App extend...
React精讲（一）原生react
weixin_45704555的博客
10-24 1924
React是什么？ react是一个优秀的js库（它与Vue，Angular并称为前端开发的三大框架），它比过去流行的js库jQuery更加好用。 React的起源 react是Facebook开源的js框架，Facebook推出这一框架的原因：（这主要源于在完成一个前端需求时所产生的bug） 上述界面中，每个图标的右上方都有一个动态变化的数字，如果仅仅用js来维护，我们通常会把这三个数字放在一起来维护，但这样在对这三个图标做大量点击操作时，数字的变化常常会产生许多bug 于是Facebook的工程师就思
react 父组件与子组件之间的值传递的方法
08-29
本篇文章主要介绍了react 父组件与子组件之间的值传递的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-simple-range:React滑块组件，用于输入范围内的数值
05-30
一个简单的 React 滑块组件，用于输入范围内的数值。 安装 npm install react-simple-range --save 用法 使用您选择的模块捆绑器导入React和此组件： import React from 'react'; import ReactDOM from 'react-...
React滚动组件-React开发
05-27
安装$ npm install react-scroll运行$ npm install $ npm test $ npm start示例检出示例实时示例用于对垂直滚动进行动画处理的基本React Scroll组件。 安装$ npm install react-scroll运行$ npm install $ npm test ...
在react中受控组件input里面onChange传值的问题
gaojing1023的博客
06-06 7185
在react中，调用事件，如果该事件不是用箭头函数定义的，那就要手动给该事件绑定this，这里不解释原理(this指向问题) 如下一个正常的受控组件input 构造器里面定义的state如下 this.state = { value: ‘’ } 在render中有一个input 通过箭头函数, 2. _handleChange = (event) => { 3. this.setState(() => ({ 4. value: event.target.value 5. }))
React Native与原生模块、组件之间的关系浅析
非動ご博客
07-08 1998
原生组件 当React Native开始渲染一个界面时，原生层会建立与该界面结构一样的镜像。桥接层把规则（组件属性）从React Native所描绘的UI层传递给原生层。最终在屏幕上看到的，就是React组件转译成相应原生组件的结果。以下我们将探究： - ViewManager(“视图管理器”)如何管理原生UI组件; - React组件属性如何传递给在原生层定义的函数并选择处理方式。 Re...
失去焦点修改事件
实践求真知
04-12 1996
一 介绍 失去焦点修改事件（onchange）是当前元素失去焦点并且元素的内容发生改变时触发事件处理程序。该事件一般在下拉文本框中使用。   二 应用 用下拉文本框改变字体颜色 本示例是在用户选择下拉文本框中的颜色时，通过onchange事件来相应的改变文本框的字体颜色。   三 代码 黑 黄 蓝 绿 红 紫 <!-- f
react之onChange事件
热门推荐
mapbar_front的博客
05-30 2万+
如何获取输入框的值是react中必须面对的问题，目前比较好的方式与两种，一种是使用ref，而另一种是使用onChange事件，它通过事件对象的方式获取输入值。 具体使用方式如下：import React,{ Component } from "react";import { render } from "react-dom"; class Main extends Component{ c
Ant Design React Upload 上传视频时，onChange只调一次
LoveEate的博客
07-01 1606
问题：在上传视频时，出现进度条一直是在上传中的，在前端打console时发现，Upload组件的onChange事件一直是 uploading状态，但是后端返回200，已经上传成功了 解决办法：在onChange 方法中，当上传状态是uploading时，重新塞下值 写成 this.setState({fileList: [... info.fileList]}); 而不是 this.setState({fileList3: info.fileList}); ...
React Input组件绑定onChange函数联动其他组件
a83370892的博客
12-06 4956
Input组件： &lt;FormItem label="Account Number" labelCol={defLabelCol} wrapperCol={defLabelCol} className={GlobalStyle['MF-Form-Input']}&gt; { getFieldDecorator('AcctId', { rule...
React-Native系列Android自定义原生UI组件
水滴穿石
09-17 9924
由于官方的Android原生UI组件解释的并不是很完整，根据个人的不断摸索，终于成功完成原生组件的制作，所以写下这篇文章作为记录，也给让小白们少走些弯路。我这里通过讲解制作一个绘圆组件的流程，来学习制作android原生UI组件。这个绘圆组件并没有实际的使用价值，只是为了更容易的了解android原生UI组件的制作过程。好了废话不多说，现在开始吧。首先初始化react-native项目，最好能弄个V
React学习-HOC高阶组件
helloWorld
10-17 216
React学习-HOC高阶组件 高阶组件 就是一个函数 接受一个组件，加工，返回一个新的组件 <script type="text/babel"> class Com extends React.Component{ render(){ return( <div> <h1>我是加工原材料</h1> <
React Native封装原生组件发布到npm
peach
03-07 2977
因为一个任务，要写原生的获取用户手机文件夹，实现用户自定义文件夹的功能，写好了之后尝试封装成组件。1. 首先，有一个rn项目，用Adnroid Studio打开 android -&gt; app -&gt; build.gradle如图新建一个 Android Module,名字就取react-native-xxxxxxx,根据功能取吧，包名都可以自定义的。以react-native-direc...
React Tabs组件源码解析与使用
React组件 Tabs 源码开箱1的知识点 1. React 基础概念 React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。它主要用于构建单页面应用程序，通过组件化开发方式，使得开发者可以将大型应用拆分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值