React 基础（三）

朴灿烈づ我的快乐病毒、 2022-05-26 13:23 173阅读 0赞

一、特点

*  **1.声明式设计** −React采用声明范式，可以轻松描述应用。
 *  **2.高效** −React通过对DOM的模拟，最大限度地减少与DOM的交互。
 *  **3.灵活** −React可以与已知的库或框架很好地配合。
 *  **4.JSX** − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
 *  **5.组件** − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
 *  **6.单向响应的数据流** − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

React CDN 库

*  **react.min.js** \- React 的核心库
 *  **react-dom.min.js** \- 提供与 DOM 相关的功能
 *  **babel.min.js** \- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。

在 React 中使用 CommonJS 模块系统，比如 browserify 或 webpack，本教程使用 webpack。

国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
    $ npm config set registry https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]

## 使用 create-react-app 快速构建 React 开发环境 ##

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令创建项目：

$ cnpm install -g create-react-app
    $ create-react-app my-app
    $ cd my-app/
    $ npm start

修改后，打开 http://localhost:3000/ （一般自动刷新），输出结果如下：

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

*  JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
 *  它是类型安全的，在编译过程中就能发现错误。
 *  使用 JSX 编写模板更加简单快速。

1.js表达式

在 JSX 中不能使用**if else** 语句，但可以使用 **conditional (三元运算)** 表达式来替代。以下实例中如果变量 **i** 等于 **1** 浏览器将输出 **true**, 如果修改 i 的值，则会输出 **false**.

2、样式

3.注释 必须卸载花括号内

ReactDOM.render(
        <div>
        <h1>菜鸟教程</h1>
        {/*注释...*/}
         </div>,
        document.getElementById('example')
    );

JSX 允许在模板中插入数组，数组会自动展开所有成员：

var arr = [
      <h1>菜鸟教程</h1>,
      <h2>学的不仅是技术，更是梦想！</h2>,
    ];
    ReactDOM.render(
      <div>{arr}</div>,
      document.getElementById('example')
    );

eact 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。

var  myDivElement  = < div  className = " foo "  />; ReactDOM . render ( myDivElement ,  
 document . getElementById ( ' example ' ) ) ;

要渲染 React 组件，只需创建一个大写字母开头的本地变量。

var  MyComponent  =  React . createClass ( \{  /\* ... \*/ \} ) ; var  myElement  = < MyComponent  someProperty = \{  true \}  
  />; ReactDOM . render ( myElement ,  document . getElementById ( ' example ' ) ) ;

**关于React注释的问题：**

1、在标签内部的注释需要花括号

2、在标签外的的注释不能使用花括号

ReactDOM.render(
        /*注释 */
        <h1>孙朝阳 {
       /*注释*/}</h1>,
        document.getElementById('example')
    );

注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成

helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

#### **onClick**    ####

onClick 等事件，与原生 HTML 不同，on 之后第一个字母是大写的！

比如本章实例中，如果将 onClick=\{this.handleClick\} 换成 οnclick=\{this.handleClick\} 则点击事件不再生效。

### props    ###

state 和 props 主要的区别在于 **props** 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

你可以通过 getDefaultProps() 方法为 props 设置默认值，实例如下：