React的基本使用React的基本使用这一篇记录了React的基本使用虚拟DOM、JSX、组件等！虚拟DOM js

React的基本使用

这一篇记录了React的基本使用虚拟DOM、JSX、组件等！

虚拟DOM

<body>
  <div id="app"></div>
  <!-- 引入react核心库 -->
  <script src="./react.development.js"></script>
  <!-- react.dom 用于支持react操作dom的扩展库 -->
  <script src="./react-dom.development.js"></script>
  <!-- 引入babel 用于将jsx转换为js -->
  <script src="./babel.min.js"></script>
  <script type="text/babel"> /* 此处一定要写babel */
    const DOM = (<h1>holle react</h1>) /* 因为不是字符串所以不能写引号！ */
    ReactDOM.render(DOM, document.getElementById('app'))
  </script>
</body>

# 关于虚拟DOM
1. 本质是Object类型的对象
2. 虚拟DOM比较轻，真实DOM比较重，因为虚拟DOM是React内部在使用，不需要真是DOM上绑定那么多的属性
3. 虚拟DOM最终会被React转换Wie真实DOM，呈现在页面上

jsx语法规则

const testId = 'DMC'
const DOM = (     /* 因为不是字符串所以不能写引号！ */
  <div>
    <h1 id={testId} className='title' style={{ fontSize: '50px' }}>holle react</h1>
    <h1>这是第一次写react</h1>
    <input type="text" />
  </div>
)
ReactDOM.render(DOM, document.getElementById('app'))

# jsx语法规则
1. 定义虚拟DOM时,不写引号
2. 标签中混入js表达式时需要用{}
3. 样式的类名指定不要用class二是用className
4. 内联样式,要用style={{key:'value'}}的形式写
5. 只能有一个根标签
6. 标签必须闭合
7. 标签首字母大写
   若小写字母开头,则将改标签转换为html中的同名标签,若html中无改标签则会报错
   若大写字母开头,react就回去渲染对应的组件,若组件没有定义则报错

const list = ['vue', 'react']
const DOM = (
  <div>
    <h1>这是一个列表</h1>
    <ul>
      {
        list.map((item,index)=>{
          return <li key={index}>{item}</li>
        })
      }
    </ul>
  </div>
)
ReactDOM.render(DOM,document.getElementById('app'))

# 区分js语句(代码)和js表达式
标签中混入js表达式时需要用{}
1. 表达式: 一个表达式会产生一个值,可以放在任何一个需要值的地方
   表达式有: arr.map\function test(){}\demo()等(在前面加上const 变量 = 能够接收到值得都是表达式)
   如果{}中放入的是一个数组react会自动遍历,如果是一个对象会报错
2. 语句(代码)
   比如if()\for(){}\switch(){case:xxx}这些就是代码，是不能写在{}中的

模块和组件

# 模块
模块就是一个个js文件,一个js文件就是一个模块
作用：复用js、简化js、提高js运行效率
# 组件
组件就是用来实现局部功能效果的代码和资源的集合
作用：复用代码,简化项目代码,提高运行效率

函数式组件

function Dom(){
  return <h2>我是一个函数组件！</h2>
}
ReactDOM.render(<Dom/>,document.getElementById('app'))

# 执行如上代码发生了什么
1. React解析组件标签，找到Dom组件
2. 发现组件式使用函数定义的，随后调用该函数，将返回的虚拟DMO转为真实DOM，随后呈现在页面之中。

类式组件

class MyComponent extends React.Component {
  // render是放在MyComponent的原型对象上，供实例使用的
  render() {
    return <h1>Hello World!</h1>;
  }
}

声明类式组件类需要继承React.Component这个react的内置类,同时需要写一个render函数,return的内容就是这个组件的结构
render函数定义在MyComponent组件的原型对象上,供实例使用。
render里面的this指向的是MyComponent类的实例对象,也可以称为组件的实例
# 执行ReactDOM.render后发生了什么?
1. React解析组件标签,找到MyComponent这个组件
2. 发现组件是用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
3. 将render返回的虚拟的DOM转化为真实DOM,呈现在页面。

小结

通过这一小节,能够就能够学会React的一些基本的使用！