React一——起源、安装、jsx

2024年3月6日 150次阅读 来源: Cymiran

React 起源

官网：https://doc.react-china.org/d…
Facebook公司出品，因为对市场上所有 JavaScript MVC 框架，都不满意，
就决定自己写一套，用来架设 Instagram 的网站。
做出来以后，发现这套东西很好用，然后13年面世，14年国内引入，
由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单，
同时github受到大量的关注，国内各大公司都会分出专门的人力物力去研究使用。

出发点

基于HTML的前端界面开发正变得越来越复杂，其本质问题基本都可以归结于：
如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上。
而来自Facebook的React框架正是完全面向此问题的一个解决方案，按官网描述，其出发点为：
用于开发数据不断变化的大型应用程序（Building large applications with data that changes over time）。

相比传统型的前端开发，React开辟了一个相当另类的途径，实现了前端界面的高性能高效率开发。

安装

a. 脚手架 cnpm i create-react-app -g
b. 创建项目 create-react-app react-app
c. 装好之后src 里只留index.js入口文件
    react 与 react-dom
        react ： react代码的构建
        react-dom:将react代码渲染到页面上
    //渲染主键 挂载点
    ReactDom.render(<div>test</div>,document.getElementById('root'))
d. index.js

    import React from 'react'
    import ReactDom from 'react-dom'

React概念

React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；，因为MVC耦合度高，性能也不是很好

适用的项目：数据不断变化的大型应用程序？Why?
优点： 高性能高效率
React是一个轻量级视图层前端JS框架

无状态组件和有状态组件(高阶组件)

1、无状态组件：例如

const test = function(){

    //情形一
    return <div>test</div>
    
    //显示js逻辑
    let x = 'test'
    return <div>{x}</div>
    
    //显示js逻辑2
    let x = 'test'
    return (
        <div>
            <div>{x}</div>
            <div>test</div>
        </div>
    )
}
 
ReactDom.render(test(),document.getElementById('root'))

可以看到 无状态组件没有定义类 React.createClass 或者class Name extends React.Component 来创建自己的函数组件
直接简写成了一个render函数
省掉了将组建类实例化的过程
无法实现组建的生命周期方法
不支持“ref” ，因为在 React 调用到无状态组件的方法之前，是没有一个实例化的过程的，因此也就没有所谓的 “ref”

2、有状态组件(高阶组件)
我们正常写的组件都可称为有状态组件

React 特点和优势

  1. JSX语法糖

全称为javascript xml，作用，帮助React构建虚拟dom结构，不使用JSX的话，需要使用React.createElement(tagName,options:(id,className),contents..)
例如：

var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

使用jsx语法会使react开发更为简单，xml指的只是借鉴了一些XML的语法，标签必须闭合，最外层必须有节点包裹

常用语法：

1、定义属性及元素

 var node = (
  <div className="container">
    {
       person ? <span>Welcome back, <b>{person.firstName} {person.lastName}</b>!</span>
       : <span>Please log in</span>
    }
  </div>
);

2、事件绑定

<button onClick={this.checkAndSubmit.bind(this)}>Submit</button>

3、样式

<div style={{color: '#ff0000', fontSize: '14px'}}>Hello World.</div>
或：
    var style = {
      color: '#ff0000',
      fontSize: '14px'
    };
    
    var node = <div style={style}>HelloWorld.</div>;

4、class类名用className

5、遍历

    <ul>  
        {  
            arr.map(function(name){  
                return <li>{name}</li> <span style="color:#ff0000;">//必须要return出来否则在dom中不会显示</span>  
            })  
        }     
    </ul>,

6、用Babel进行jsx编译

npm install —save-dev babel-loader

    只需稍微改变一下webpack.config.js的配置，将原来的jsx-loader变为babel-loader：

module: {
  loaders: [
    { test: /\.jsx?$/, loaders: ['babel-loader']}
  ]
}
    原文作者：Cymiran
    原文地址: https://segmentfault.com/a/1190000012281390
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞