react-1-开发环境配置

React学习笔记

• MVC模型 / 单向数据绑定·

  • Module: 用于存在数据
  • view: 用于更新DOM
  • Controller： 调用Module给view渲染使用

• MVVM模型 / 双向数据绑定

  • Module: 用于存在数据
  • view: 响应用户交互行为
  • ViewModel: 可以理解为自动化调用的Presenter

React开发环境搭建 (脚手架)

$ cnpm install -g create-react-app //=> 安装脚手架
$ create-react-app my-app //=> 创建文件
$ cd my-app  //=> cd 到文件目录
$ npm start //=> 启动项目

脚手架渲染数据 Component / PureComponent

import React, {PureComponent} from 'react';
// class App extends React.Component {
class App extends PureComponent {
  render() { 
    return ( 
      <div>
        PureComponent
      </div>
     );
  }
}
export default App;

//PureComponent 比 Component 节约资源

元素渲染 / 加载组件

import React from 'react';
import ReactDOM from 'react-dom';
import Test from './test';

ReactDOM.render(
  <React.StrictMode>
    // 挂载组件
    <Test />
  </React.StrictMode>,
  document.getElementById('root')
);

卸载组件

ReactDOM.unmountComponentAtNode(组件)
ReactDOM.unmountComponentAtNode('document.getElementById('App')')