React框架——入门知识点总结+示例（1）

最新推荐文章于 2025-03-19 17:05:42 发布

Whuiry

最新推荐文章于 2025-03-19 17:05:42 发布

阅读量599

点赞数

分类专栏：前端 React框架知识点

本文链接：https://blog.youkuaiyun.com/Whuiry/article/details/107754965

版权

前端同时被 2 个专栏收录

21 篇文章

订阅专栏

React框架知识点

3 篇文章

订阅专栏

本文详细介绍React框架的基础知识，包括环境搭建、组件创建、JSX语法、函数与类组件定义及数据处理。适合React初学者快速上手。

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

React框架

01体验react

1.搭建结构

注意点：
1.（重点）引入两个文件；
2.创建绑定元素；
3.在script里创建组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React测试</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    //2、3、4点写在这
</script>
</body>
</html>

2.在Script标签里创建组件

//第一个参数：标签名；
//第二个参数：属性；
//第三个参数：标签内容
var tag=React.createElement('h1',{title:'这是标题'},'这是内容');

3.在React.render()里渲染绑定元素

//渲染
ReactDOM.render(tag,document.getElementById('app'));

4.添加className

<style>
    .one{
        color:red;
    }
</style>

//react内部的class用className替代
var tag=React.createElement('h1',{title:'这是标题',className:'one'},'这是内容');

5.引入babel

重要：在head标签多引入babel文件；

    <!-- babel 支持了jsx语法 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

jsx：在js中书写xml语法 ,需要Babel支持

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GmuheiYs-1596387096920)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20200802222307187.png)]$
上面2、3、4点都可以不写，直接复制粘贴1、5即可运行

<script type="text/babel">
	var tag=<h1>这是标题</h1>
//绑定元素 第一个参数：组件；第二个参数：渲染的标签
	ReactDOM.render(tag,document.getElementById('app'));
</script>

6.React使用注意事项：

1.jsx中必须闭合标签;
2.只有一个根元素；
3.一般不支持社区方法

var tag=<div><input type="text" /><h1>这是标题</h1></div>;

02jsx语法

注意点：
1.在js中书写xml语法一定要有根标签 class是className；
3.jsx外部不加引号（加了会变成字符串），特殊语法
3.如果需要在jsx内部书写js 必须加{}，不能使用for 可以使用forEach和map 一般推荐map map可以有返回值
4.这是文字注释需要加{}需要换行（要不把 “}” 也会注释掉）
5.map遍历的时候需要加唯一的key

<head>
	<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="app">
        
    </div>

<!--    babel支持了jsx语法-->
<script style="text/babel">
    var a=[1,2,3,4]
    // for(var i in a){
    //     console.log(i);
    // }
//---------------------------
    //forEach不能有返回值
    var c=a.forEach((item)=>{
        console.log(item); //1 2 3 4
        return item;
    })
    console.log(c); //undefined
//---------------------------
    // map用来遍历，用法基本和forEach一样，可以有返回值
    var c=a.map(function (item) {
        return item+'hello'
    })
    // (4) ["1hello", "2hello", "3hello", "4hello"]
    console.log(c);
//---------------------------
	//在js中书写xml语法 一定要有根标签 class是className
    //jsx外部不加引号，特殊语法
    
    //定义变量
    var msg='hello React'
    //创建组件
    var tag=<div>
    //如果需要在jsx内部书写js 必须要加{}
        {msg} <br/><br/>
        {1+1}
        {1>2?'hello':'react'}<br /><br />
        {Math.random()}<br /><br />
        
         {
            //    这是文字注释需要加{}需要换行（要不把 "}" 也会注释掉）
         }
         //如果需要在jsx内部书写js 必须加{}，不能使用for 可以使用forEach和map 一般推荐map map可以有返回值
         {
         	 //    内部是js环境
            a.map(function (item,index) {
            //    return item+"hello"
            //    遍历的时候需要加唯一的key
                return <h1 key={index}>这是标题{item}</h1>

            })
         }
        
        <h1>这是标题</h1>
        <p>这是段落</p>
    </div>
    //渲染
    ReactDOM.render(tag,document.getElementById('app'));
    
    
    
</script>
</body>

jsx的优点：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uEVI3xZU-1596387096941)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20200802233038148.png)]$

03函数定义组件

1.调用组件：<函数名></函数名> 简写为 <函数名 />

函数创建组件，调用的时候，直接把函数名当作标签处理 <函数名 k=v k=v></函数名> 简写为 <函数名 />

//1.引入文件
//在body中写绑定元素 <div id="app"></div>
//2.书写script
<script type="text/babel">
    function Tag(){
    	return <div>
            	<input type="text" />
                <button>发布</button>
            </div>
}
	// 函数创建组件，调用的时候，直接把函数名当作标签处理 <函数名 k=v k=v></函数名>简写为<函数名 />
    // ReactDOM.render(<Tag></Tag>,document.getElementById('app'));
    ReactDOM.render(<Tag />,document.getElementById('app'));    

</script>

2.组件传参：<函数名 key=v key=v />

//1.props接收参数 接收的时候函数内部接收参数 props={k:v,k:v}
function Tag(props) {
           console.log(props); //参数只有一个打印：Obeject；参数有两个以上打印 {k:v,k:v}
           return <div>
               <input type="text"/>
               <button>发布</button>
    			//使用的时候获取k对应的值，不能直接使用props,不能直接使用对象
               <p>{props.name}</p>
           </div>
        }

//name传参
ReactDOM.render(<Tag name='zs' pass='123'/>,document.getElementById('app'));

//2.stu={stu}对象传参 hobby={hobby}数组传参
function Tag(props) {
           console.log(props); //Obeject
           return <div>
           	   <button>发布{props.name}</button>
    			//使用的时候获取k对应的值，不能直接使用props,不能直接使用对象{}，可以使用数组[]
               <p>{props.stu.name}</p>
    		   <p>{props.hobby}</p>
           </div>
        }

var stu={
	name:'zs',
	pass:123
}

var hobby=[1,2,3,4];

//name传参
ReactDOM.render(<Tag name='zs' stu={stu} hobby={hobby}/>,document.getElementById('app'));

//3.<函数名 {...变量名} />相当于把变量的值传递
function Tag(props) {
           console.log(props); //{k:v,k:v}
           return <div>
               <p>{props.name}</p>
           </div>
        }

var stu={
	name:'zs',
	pass:123，
    //如果想传数组，把数组写入对象中
    hobby:[1,2,3,4]
}

//name传参
ReactDOM.render(<Tag {...stu}/>,document.getElementById('app'));

//4.传参可以混合传参，但是有先后顺序
ReactDOM.render(<Tag {...hobby} {...stu} pass='123456' />,document.getElementById('app'))
//stu的pass='123',后面又写了一个同名pass='123456'(打印的是后面的pass)
//{...hobby}与{...stu}最好不要写在一起，如果想传数组，就把数组写在对象里面

3.组件嵌套

// 组件嵌套:书写好子组件，在需要的位置，直接调用即可
        function Child(props){
            return <li>这是子组件</li>
        }

        function Tag(props) {
           console.log(props);
           return <div>
               <ul>
                   <Child/>
               </ul>
           </div>
        }
ReactDOM.render(<Tag></Tag>,document.getElementById('app'));

04类定义组件

1.类定义组件

//1.引入文件
//在body中写绑定元素 <div id="app"></div>
//2.书写script
<script type="text/babel">
    //使用类创建组件 继承自React.Component
    //使用的方式和函数定义组件一样
   class Wrap extends React.Component{
       constructor(props){
           super(props)
       }
       //render书写的是模板
       render(){
           return <div>这是数据</div>
       }
   }

    ReactDOM.render(<Wrap />,document.getElementById('app'));    
</script>

2.传参

//1.引入文件
//在body中写绑定元素 <div id="app"></div>
//2.书写script
<script type="text/babel">
   class Wrap extends React.Component{
       constructor(props){
           //相当于一个数据
           super(props)
       }
       render(){
           //使用props：this.props.name
           return <div>这是数据{this.props.name}</div>
       }
   }
	
	var stu={
		name:'zs'
	}
    ReactDOM.render(<Wrap {...stu}/>,document.getElementById('app'));    
</script>

3.使用子组件

//1.引入文件
//在body中写绑定元素 <div id="app"></div>
//2.书写script
<script type="text/babel">
    //子组件
    class Child extends React.Component{
        constructor(props){
            super(props)
        }
        //渲染，一定要有render
        render(){
            return <h1>这是子组件</h1>
        }
    }
   class Wrap extends React.Component{
       constructor(props){
           //相当于一个数据
           super(props)
       }
       render(){
           //使用props：this.props.name
           return <div>
               这是数据{this.props.name}
           	   <Child />
           </div>
       }
   }
	
	var stu={
		name:'zs'
	}
    ReactDOM.render(<Wrap {...stu}/>,document.getElementById('app'));    
</script>

4.加入数据

<script type="text/babel">
    //1.数据
   var info=[
        {
            "msg":'昨天天气'
        },
        {
            "msg":'昨天天气'
        },
        {
            "msg":'昨天天气'
        },
        {
            "msg":'昨天天气'
        }
    ]
    //2.子组件
    class Child extends React.Component{
        constructor(props){
            super(props)
        }
        //渲染，一定要有render
        render(){
            return <h1>这是子组件{this.props.msg}</h1>
        }
    }
	//3.父组件
   class Wrap extends React.Component{
       constructor(props){
           //相当于一个数据
           super(props)
       }
       render(){
           return <div>
               这是数据
           	//4.书写循环
           	   {
                   info.map((item,index)=>{
                       //一定要有return 否则相当于执行了但没有返回值
                      return <Child key={index} {...item}/>
                   })
               }
           </div>
       }
   }
	
    ReactDOM.render(<Wrap/>,document.getElementById('app'));    
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NxT7kWTT-1596387096947)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20200803004506294.png)]$