React - 概念

1. JSX

• React定义的一种类似于XML的JS扩展语法，使得可以在HTML标签内嵌套JS（嵌套的JS语句要用使用 { } 包起来）。
• 使用JSX用来创建虚拟DOM。
• 使用JSX，都需要声明用babel（加上type = “text/babel”）来处理，因为浏览器的JS引擎无法直接解析* * JSX代码, 需要babel转译为纯JS代码才能运行。以 < 开头的代码，以HTML标签的语法解析。以 { 开头的代码，以JS的语法解析。

2. 渲染虚拟DOM

• 将虚拟DOM元素渲染到真实容器DOM中显示
• 语法：ReactDOM.render(virtualDOM, containerDOM); 参数：virtualDOM：JSX或纯JS创建的虚拟dom对象。containerDOM：真实DOM元素(一般为div)，用于包含虚拟DOM。
• 示例：

ReactDOM.render(<App />, document.getElementById('root'));

• 渲染虚拟DOM时仅更新修改了的部分，而不会全部渲染。

3. 组件

• 组件首字母一定要大写。
• 引入Component组件，然后通过class方式继承Component，最后将组件导出即可成为单独组件使用。
• 定义组件：

// 引入Component组件
import React, { Component } from 'react';
// 继承Component
class App extends Component {
  // 通过render函数可以将JSX语法渲染成真是dom
  render() {
    return (
      <div className="App">
      </div>
    );
  }
}
// 导出组件
export default App;

• 渲染组件标签：

ReactDOM.render(<App />, document.getElementById('root'));

4. 组件props

• 子组件可以通过 this.props 获取父组件传递的值。

// 子组件
class Child extends Component {
  render() {
    return (
      // 获取父组件的传值
      <p>{this.props.parentProp}</p>
    )
  }
}
// 父组件
class Parent extends Component {
  render() {
      // 通过父组件传递参数
      return <Child parentProp = "我是父级props" />
  }
}

5. 组件state

• 修改state会引起React重新渲染。
• 使用setState()这个异步函数来变更state
• constructor(): 创建对象初始化state

// 使用setState()这个异步函数来变更state
class TestOfState extends Component {
  // constructor(): 创建对象初始化state
  consturtion(){
      this.state={
          count: 0
      }
  }
  render() {
      return (
        <div>
          <button onClick={()=>{
            //点击后可修改state值
            this.setState({
              count: count + 1,
            })
          }}>加1</button>
          <p>{this.state.count}</p>
        </div>
      )
  }
}

6. 组件refs

• 组件内的标签都可以定义ref属性来标识自己。
• 在组件中可以通过this.refs.refName来得到对应的真实DOM对象。

7. 常用的方法

• render(): 必须重写, 返回一个自定义的虚拟DOM。
• constructor(): 创建初始化对象。
• componentDidMount() : 只执行一次，组件挂载完执行。