react--系列 记录-1

React 特点

• 1.声明式设计 −React采用声明范式，可以轻松描述应用。

  2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

  3.灵活 −React可以与已知的库或框架很好地配合。

  4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

  5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

  6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

简单的demo使用组件：

app.js

import React, { Component } from 'react'
import './App.css'

// 定义 App  组件
class App extends Component {
  render() {
    return (
      <div className="App">
          <h1>这里是入口文件</h1>
      </div>
    )
  }
}
// 导出组件
export default App

• 一个组件类必须要实现一个 render ()方法，
• ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
• 这个 render 方法必须要返回一个 JSX 元素。
• JSX 元素可以说是js的扩展，也可以理解为是 js 和 xml 的集合，在js中进行dom的渲染操作。
• dom中标签的类名属性，遵循的是js变量的规则，不同于html结构中的定义。比如className，内联样式的语法要使用驼峰式命名。
• 要用一个外层的 JSX 元素把所有内容包裹起来,返回并列多个 JSX 元素是不合法的.

错误的代码演示：

render () {
  return (
    <p>第一个</p>
    <p>第二个</p>
  )
}

正确的代码演示：

render () {
  return (
    <div>
     <p>第一个</p>
     <p>第二个</p>
    </div>
  )
}

• jsx的注释形式：

 return ( 
  // jsx 外面的注释，没有在包裹里面的
  <div> 
    {/* jsx 里面的注释 */}
    <p>hello world</p>
  </div> )

注释方式都是可以通过快捷键 ctrl+ ? 实现的。

• map循环方法：

// 定义组件
class App extends Component {
  render() {
    const arr=['aa','bb','cc']
    return (
      <div className="App">
          <h1>这里是入口文件</h1>
          <ul>
              {arr.map(function(item, index){
                return <li key={index}>{item}</li>
              })
              }
            </ul>
      </div>
    )
  }
}
// 导出组件
export default App

这里需要注意的是 arr.map是包裹在{}中的，key={index}有助于React的渲染优化，jsx中的{}可放一个可执行的 js 程序或者变量，语法不规范的话，就会显示报错。