react

使用react需要导入两个模块，react模块中提供了一些供模板使用的方法，react-dom提供了渲染DOM的方法

import React from 'react'
import ReactDOM from 'react-dom'

给JSX元素加class要用classname代替

ReactDOM.render(<h1 className="bg">hello world</h1>, document.getElementById('root'))

JSX注释的写法

ReactDOM.render(<h1 className="bg">{/* hello world */}</h1>, document.getElementById('root'))

大括号内放置任何有效的JavaScript 表达式

let str = ''hello world''
ReactDOM.render(<h1 className="bg">{str}</h1>, document.getElementById('root'))

大括号取值是取一个有返回值得值

let str = () => 'hello world'
ReactDOM.render(<h1 className="bg">{str()}</h1>, document.getElementById('root'))

JSX循环遍历数组，遍历时候需要提供一个唯一的key属性

let ele = (
 <ul>
   {arr.map((item,index) => <li key={index}>{item}</li>)}
 </ul>
)
ReactDOM.render(ele, document.getElementById('root'))

<lable></label>标签的for属性要使用htmlFor代替

let ele = (
  <div>
    <label htmlFor="username">
    用户名:
    </label>
    <input type="text" id="username"/>
  </div>
)
ReactDOM.render(ele, document.getElementById('root'))

style必须是一个对象的形式

ReactDOM.render(<h1 style={{background: 'red'}}>hello world</h1>, document.getElementById('root'))

插入HTML

let str = '<div>插入标签</div>'
React.render(<h1 dangerouslySetInnerHTML={{__html: str}}></h1>, document.getElementById('root'))

组件

组件名开头大写，声明组件有函数声明和类声明两种形式

function Temp () {
  return (
    <h1>hello world</h1>
  )
}
ReactDOM.render(<div><Temp /></div>, document.getElementById('root'))

外界可以通过属性的形式来给组件传递参数，函数的参数就是传递的属性，参数是一个对象，里面包含传递过来的属性，既是组件，也照常可以当做函数来用，注意函数里面是没有this，react中语法采用严格模式

function Temp (props) {
  return (
    <h1>{props.str}</h1>
  )
}
let str = 'hello world'
ReactDOM.render(<div><Temp str={str}/></div>, document.getElementById('root'))

类里面有生命周期，函数组件没有生命周期，状态等。首先需要先继承React.Component这个类，这个类提供了一些方法供我们使用的方法，组件的结构写在render函数里面，函数里面必须要有一个跟节点

class Temp extends React.Component {
  constructor (props) {
    super()
  }
  render() {
    return (
      <h1>
        {this.props.str}
      </h1>
    )
  }
}
let str = 'hello world'
ReactDOM.render(<div><Temp str={str}/></div>, document.getElementById('root'))

类里面的this是当前实例，实例上有props属性，里面是组件所有的属性