React简单概述

本文概述了React的基本概念,包括React作为Facebook推出的JavaScript库的开发背景,如何创建组件,以及组件的属性如props和state。详细讲解了组件的定义要求,如大写字母开头和单一根元素,以及函数组件和类组件的区别。同时,文章还介绍了React中的数据传递,包括父组件向子组件、子组件向父组件以及兄弟组件间的数据传递方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1React是什么

1-1:React开发背景:

1:React是facebook官方推出的JavaScritp库和框架,为解决构建数据不断变化的大型应用。

2:因为数据不断变化所以会导致大量的dom操作,逻辑极其复杂。
  3:react通过自动对dom进行操作,开发者只需要告诉React你要展示什么内容,解决大量dom操作的问题,把状态和内容显示的对应起来,这样我们就会知道状态变化,内容会如何变化从而理清程序逻辑。

2react创建组件

2-1:定义组件有两个要求:

1.组件名称必须以大写字母开头
2.组件的返回值只能有一个根元素

2-2react创建组件有两种方式

1:函数组件

import React from 'react'; //引入react模块,这是不可缺少的一步操作

//定义一个React组件
function App() {
  return (
    <div>
      这是一个函数组件
    </div>
  );
}

export default App;

2:类组件 也叫(class组件)

import React from 'react';

//定义一个React组件
class App extends React.Component{
  render(){
    return (
      <div>
        Hello,Reactjs!!
      </div>
    );
  }
}

export default App;
2-3:类组件和函数组件的区别。
  1. 类组件,有生命周期,有props属性和state属性。是有状态组件。
  2. 函数组件,没有生命周期,只有props属性。是无状态组件。
  3. 二者的根本区别在于是否有state属性

3react的属性

3-1:props属性

1.react中说的单向数据流值说的就是props。也可以说props是用来传值的

3-1-1:props的特点
  1. 每一个组件对象都会有props属性,不论是无状态组件还是有状态组件,都有props属性。
  2. 组件的标签的所有属性都保存在props里面。
  3. 可以读取内部的某个属性值。
  4. 可以通过标签属性,从组件外,向组件内传递数据,(也就是传值)。
  5. props中的属性值进行类型限制和必要性限制。

这是一个简单的例子

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

//使用class组件
class User extends React.Component{
    render(){
        return (
        //props属性是不可修改的
    <div>{this.props.name}--{this.props.age}</div>
        );
    }
}

//数据
const person ={
    name:'张三',
    age:20,
    sex:'男'
}

ReactDOM.render(
    <User {...person}></User>//{...person}是扩展操作符用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中
, document.getElementById('root'));
3-2:state属性

1.React 的核心思想是组件化,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据。
这是一个简单的例子

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

class Person extends React.Component{
	//构造方法
    constructor(){
        super();
        this.state = {
            name: 'tom'
        }
    }

    render(){
        //state属性是可修改的
        this.state.name = 'Mary';
        return (
        <h1>{this.state.name}</h1>
        );
    }
}

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

4父子组件传值

4-1:父组件向子组件传值
父件代码
import React from 'react';
import Son from './Son';//将子组件导入进来
class Father extends React.Component{
 render(){
        return (
            <React.Fragment>
                <Son mess='浅笑'  />
            </React.Fragment>
        )
    }
}
export default Father;//向外暴露自己
子组件代码
import React from 'react';

class Son extends React.Component{
    render(){
        return (
            <React.Fragment>
                 {this.props.mess}//通过props来接收父组件传递过来的内容
            </React.Fragment>
        )
    }
}
export default Son;
入口文件代码
import React from 'react';
import ReactDom from 'react-dom';
import App from './Father'//将父组件导入进来
ReactDom.render(<App />,document.getElementById('root'))//将父组件渲染的内容,通过ID找到元素,让其在页面显示

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

4-2:子组件向父组件传值

子组件通过调用父组件传递到子组件的方法向父组件传递内容的。

父组件代码
import React from 'react';
import Son from './Son';

class Father extends React.Component{
	//构造方法 
    constructor(){
        super();
        this.state={
            message:''   //初始化message的值
        }
    }
//用于接收子组件的传值方法,参数为子组件传递过来的值
    sonMess(msg){
        console.log(msg);
        //把子组件传递过来的值赋给this.state中的属性
        this.state.message=msg;
    }

    render(){
        return (
            <React.Fragment>
                <Son son={this.sonMess.bind(this)}/>
                //sonMess属性名为子组件中调用的父组件方法名 */}
        
            </React.Fragment>
        )
    }
}
export default Father;

子组件代码
import React from 'react';

class Son extends React.Component{
//通过props属性获取父组件的sonMess方法,并将值传递过去
    sonclick(){
        this.props.son('这是从Son.js中生成的数据')
    }
    render(){
        return (
            <React.Fragment>
                <button onClick={this.sonclick.bind(this)}>Son组件中的按钮获取数据</button>
            </React.Fragment>
        )
    }
}
export default Son;
4-3:兄弟组件传值

兄弟之间传值借助的是 子组件->父组件 父组件->子组件,也就是第一个兄弟先把值传给父亲,父亲再把第一个兄弟传过来的值传给第二个兄弟

父组件代码
import React from 'react';
import Son from './Son';
import Son2 from './Son2';





class Father extends React.Component{

    constructor(){
        super();
        this.state={
            message:''
        }
    }

    sonMess(msg){
    //重新设置一个状态,将传递过来的值赋给message
        this.setState({
            message:msg
        })
        console.log("在Father.js中展示Son.js生成的数据:"+msg)
    }



    render(){
        return (
            <React.Fragment>
                <Son mess='浅笑'  son={this.sonMess.bind(this)}/>
                <Son2 son2data={this.state.message} />
            </React.Fragment>
        )
    }
}
export default Father;

子组件1 代码
import React from 'react';

class Son extends React.Component{
    sonclick(){
        this.props.son('这是从Son.js中生成的数据')
    }
    render(){
        return (
            <React.Fragment>
                <button onClick={this.sonclick.bind(this)}>Son组件中的按钮获取数据</button>
                //给按钮botton绑定一个sonclick事件,通过点击事件去传递我们的参数
            </React.Fragment>
        )
    }
}
export default Son;
子组件2 代码
import React from 'react';

class Son2 extends React.Component{
    render(){
        return (
            <React.Fragment>
                <h1>
                在Son2.js中展示Son.js中生成的数据,这个是Father.js传过来的,数据是:
                {this.props.son2data}
                </h1>

            </React.Fragment>


        )
    }
}
export default Son2;
结尾

仅个人概述,如有不足和问题,请提出来。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值