React 基础介绍 1 （语法介绍）

                                                          React 基础介绍 1  （语法介绍）

---

最近观察了几个 混合APP 的方案，感觉各有优势， 底层原理也各自不同。适合的项目 复杂度也各自不同； 感觉大家可以 按照自己的 项目复杂度 以及类型；选取合适的 项目解决方案

 

• ReactNative      支持热更新，   比较适合大型项目

• Flutter               不支持热更新，适合大型项目 由于 UI 库是独立于原生的， 所以可以做到 非常 顺滑的 UI感受，

• Vue  ++             支持热更新，   中小型 项目首选， 有丰富的 NPM 插件库，       

• Uniapp              支持热更新， （本质还是VUE），原生插件相对较多（有对应的原生插件市场）。 NPM插件 方面相对于 Vue比较欠缺，适合中小型，

 

下面我们就来 学习学习 React！

 

知识点：

---

● React 项目的创建

React 库的引入：

• 多页面   CDN 方式引入
• 单页面   npm, yarn

 

 

基本语法：  一下三种是 React 最基本的三种 语法

• ReactDOM.render()                渲染节点
• React.createElement()           创建一个元素
• React.Component()                组件的创建

 

 

● React 生命周期

 

四个阶段

• 组件初始化 阶段

• 组件接在阶段

• 数据更新阶段

• 组件销毁阶段

 

 

 

● JSX语法介绍

• JS 中编写  HTML  代码， HTML 代码中 也可以 嵌套 JS 代码      |  需要插件去做解析    （ES6规范）

  //原始  写法
  var hello = React.createElement('h1',
  {
      className:'red',
      name:'jack'
  },'hello world');
  ReactDOM.render(hello,document.getElementById('app'));
  
  //JSX  语法糖写法  代码中插入 JS
  ReactDOM.render(
    
  hello world
    ,document.getElementById('app'));
  
  
  //JSX  语法糖写法  HTML 插入代码
  var name = 'jack';
  var ele  = 
  hello {name} 
   
  ReactDOM.render(ele, document.getElementById('app1'));

   

 

 

● 事件处理

代码里面 讲到  事件的处理，子组件调用父 组件

 

 

 

 

● 元素渲染

 对于数据刷新  只会修改 有变化的地方， 效率是比较高效的

 

● 组件和props介绍

基本语法：

• React.createClass()               弃用

• 函数式组件（无状态组件）   

   

   

 

● 列表渲染

也就是 数据的循环

 

 

 

● 表单的应用