03-React入门的基本用法以及注意事项

╰半夏微凉° 2022-02-23 07:54 275阅读 0赞

# React入门的基本用法已经注意事项 #

这几天一心在研究react，有时候也是一直在坑中，慢慢摸爬滚打中，过来的，我遇见的坑，也更大家一起分享一下。

### 第一个问题，就是为什么会这样子写import React, \{ Component \} from ‘react’; ###

*  `import React, { Component } from 'react'`这写法其实是可以等价于`class App extends React.Component{ }`
    
     *  我们就来分享一下，为什么要这样子
     *  `import {Component} from 'react'` 就是等价于下面两行代码
    
        import React from 'react'
         const Component = React.Component

### 第二个问题，就是在render() \{\} 里面写 return 值的时候，不能加单引号 ###

*  因为 `render() {}`这里面是JSX语法
 *  在react中return中不能加单引号 `return '<div>hello</div>'`这个就是错误的写法, 正确的写法`return <div>hello</div>`
 *  在`return ()` 里面的最外层必须要弄一个`<div></div>` 包裹着 不然会报错的
    
     *  我们如何就是不想要最外面的div包裹着，我们怎么办呢？
        
         *  我们可以在头部加去`import React,{Component,Fragment} from 'react'` 就是加入`Fragment`占位符就可以了
            
                render(){ 
                 return (
                   <Fragment>
                     <div>
                       <input/>
                       <button>提交</button>
                     </div>
                   
                     <ul>
                       <li>学习Vue</li>
                       <li>学习React</li>
                     </ul>
                   </Fragment>
                 )
                }
 *  `return ()` 加一个括号()， 可以多行写html的代码

### 第三个问题，就是JSX语法中，如果我们要使用自己创建的组件，必须是大写字母开头 ###

*  `import APP './APP';` 这个是正确的写法 ，如果是小写的话，JSX是不识别自定义组件的
 *  自己定义了组件，但是你必须导出才能生效`export default APP`,这个才是可以生效的

##### 今天就到这些吧，接下来，我会把坑，和注意事项都会跟大家一起分享，有可能我说的也是有问题的，欢迎大家，一起来谈论最优方案！一起学习，一起进步！ #####