react学习（marksheng）

向右看齐 2022-09-02 04:12 138阅读 0赞

--------------------

## 第一步（安装工具，生成项目，启动项目） ##

## 通过 npm 使用 React ##

>     使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm：
>     npm install -g cnpm --registry=https://registry.npm.taobao.org
>     npm config set registry https://registry.npm.taobao.org

## 使用 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

React 代码的书写格式和以前的 JS 有很大的不同，下面通过对这段代码进行分析了解一下他。
    
    以前使用 JavaScript 定义一个变量使用 var，ES6 加入了 const 关键字，用来定义一个常量：
    
    const div = document.createElement('div');
    ReactDOM.render(...) 是渲染方法，所有的 js,html 都可通过它进行渲染绘制，他有两个参数，内容和渲染目标 js 对象。
    内容就是要在渲染目标中显示的东西，可以是一个 React 部件，也可以是一段HTML或TEXT文本。渲染目标JS对象，就是一个DIV或TABEL,或TD 等HTML的节点对象。
    
    ReactDOM.render(<App />, div);
    unmountComponentAtNode() 这个方法是解除渲染挂载，作用和 render 刚好相反，也就清空一个渲染目标中的 React 部件或 html 内容。
    
    ReactDOM.unmountComponentAtNode(div);

：

# **第二步**React 元素渲染（两个参数：内容和渲染目标 js 对象） #

<div id="example"></div>
    
    
    const element = <h1>Hello, world!</h1>;
    ReactDOM.render(
        element,
        document.getElementById('example')
    );

# **第三步**更新元素渲染 #

**React 元素都是不可变的。当元素被创建之后，无法改变其内容或属性。**

**目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法：**

function tick() {
      const element = (
        <div>
          <h1>Hello, world!</h1>
          <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
        </div>
      );
      ReactDOM.render(
        element,
        document.getElementById('example')
      );
    }
     
    setInterval(tick, 1000);
    
    Hello, world!
    现在是 上午10:34:04.

> **React 只会更新必要的部分**
> 
> 值得注意的是 React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。

# **第四步**React JSX #

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

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

> example:
> 
> **var myDivElement = <div className="foo" />; ReactDOM.render(myDivElement, document.getElementById('example'));**
> 
> **ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );**

> 注意:
> 
> 由于 **JSX** 就是 **JavaScript**，一些标识符像 `class` 和 `for` 不建议作为 XML 属性名。作为替代，React DOM 使用 `className` 和 `htmlFor` 来做对应的属性。

独立文件
    你的 React JSX 代码可以放在一个独立文件上，例如我们创建一个 helloworld_react.js 文件，
    然后在 HTML 文件中引入该 JS 文件
    
    JavaScript 表达式
    我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。
    
    在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。
    eg:
    ReactDOM.render(
        <div>
          <h1>{i == 1 ? 'True!' : 'False'}</h1>
        </div>
        ,
        document.getElementById('example')
    );
    
    样式
    React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。
    以下实例演示了为 h1 元素添加 myStyle 内联样式：
    eg：
    var myStyle = {
        fontSize: 100,
        color: '#FF0000'
    };
    ReactDOM.render(
        <h1 style = {myStyle}>菜鸟教程</h1>,
        document.getElementById('example')
    );
    
    注释
    注释需要写在花括号中，实例如下：
    
    React 实例
    ReactDOM.render(
        <div>
        <h1>菜鸟教程</h1>
        {/*注释...*/}
         </div>,
        document.getElementById('example')
    );
    
    数组
    JSX 允许在模板中插入数组，数组会自动展开所有成员：
    
    React 实例
    var arr = [
      <h1>菜鸟教程</h1>,
      <h2>学的不仅是技术，更是梦想！</h2>,
    ];
    ReactDOM.render(
      <div>{arr}</div>,
      document.getElementById('example')
    );

# **第五步**React 组件  #

封装一个输出 "Hello World！" 的组件，组件名为 HelloMessage：
    
    React 实例
    function HelloMessage(props) {
        return <h1>Hello World!</h1>;
    }
     
    const element = <HelloMessage />;
     
    ReactDOM.render(
        element,
        document.getElementById('example')
    );
    
    实例解析：
    
    1、我们可以使用函数定义了一个组件：
    
    function HelloMessage(props) {
        return <h1>Hello World!</h1>;
    }
    你也可以使用 ES6 class 来定义一个组件:
    
    class Welcome extends React.Component {
      render() {
        return <h1>Hello World!</h1>;
      }
    }
    2、const element = <HelloMessage /> 为用户自定义的组件。
    
    注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。
    
    如果我们需要向组件传递参数，可以使用 this.props 对象,实例如下：
    
    React 实例
    function HelloMessage(props) {
        return <h1>Hello {props.name}!</h1>;
    }
     
    const element = <HelloMessage name="Runoob"/>;
     
    ReactDOM.render(
        element,
        document.getElementById('example')
    );
    
    尝试一下 »
    以上实例中 name 属性通过 props.name 来获取。
    
    注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

## 复合组件 ##

我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。
    
    以下实例我们实现了输出网站名字和网址的组件：
    
    React 实例
    function Name(props) {
        return <h1>网站名称：{props.name}</h1>;
    }
    function Url(props) {
        return <h1>网站地址：{props.url}</h1>;
    }
    function Nickname(props) {
        return <h1>网站小名：{props.nickname}</h1>;
    }
    function App() {
        return (
        <div>
            <Name name="菜鸟教程" />
            <Url url="http://www.runoob.com" />
            <Nickname nickname="Runoob" />
        </div>
        );
    }
     
    ReactDOM.render(
         <App />,
        document.getElementById('example')
    );

**ShoppingList**是一个 **React 组件类/组件类型**。一个组件接收一些参数，我们把这些参数叫做 `props(特性),`然后通过 `render` 方法返回需要展示在屏幕上的视图的层次结构。

`render` 方法的返回值*描述*了你希望在屏幕上看到的内容。React 根据描述，然后把结果展示出来。更具体地来说，`render` 返回了一个 **React 元素**，这是一种对渲染内容的轻量级描述。大多数的 React 开发者使用了一种名为 “JSX” 的特殊语法，JSX 可以让你更轻松地书写这些结构。语法 `<div />` 会被编译成 `React.createElement('div')`。

> **三个核心依赖包**的功能分别如下：
> 
> 1.  **react.js：React核心库。**
> 2.  **react-dom.js：提供操作DOM的react扩展库。**
> 3.  **babel.min.js：解析JSX语法代码转为JS代码的库。**