React基础教程：组件、属性和数据传递-优快云博客

本文链接：https://blog.youkuaiyun.com/Phoenie_/article/details/103628506

本文概述了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:类组件和函数组件的区别。

类组件，有生命周期，有props属性和state属性。是有状态组件。
函数组件，没有生命周期，只有props属性。是无状态组件。
二者的根本区别在于是否有state属性

3react的属性

3-1:props属性

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

3-1-1:props的特点

每一个组件对象都会有props属性，不论是无状态组件还是有状态组件，都有props属性。
组件的标签的所有属性都保存在props里面。
可以读取内部的某个属性值。
可以通过标签属性，从组件外，向组件内传递数据，（也就是传值）。
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;