react-04

2019-12-09

字数统计: 829字 | 阅读时长≈ 3分

7.在项目中使用React

1.运行cnpm i react react-dom -S安装包

* react: 专门用于创作组件和虚拟DOM，同时组件的生命周期都在这个包里
* react-dom：专门进行DOM操作，最主要的应用场景，就是ReactDOM.render()

2.在index.html里，创建容器：

1	<div id="app"><app></div>

3.导入包：

1 2	import React from 'react' //创建组件、虚拟DOM元素，生命周期 import ReactDOM from 'react-dom' //把创建好的组件和虚拟DOM放到页面上展示

4.创建虚拟DOM元素

//2.创建虚拟DOM元素
//参数1：   创建的元素的类型，字符串，表示元素的名称
//参数2：   是一个对象或null，表示当前这个DOM元素的属性
//参数3：   子节点（包括其他虚拟DOM获取文本子节点）
//参数n： 其他子节点

// <h1 id="myh1" title="this is h1"></h1>
//const myh1 = React.cloneElement('h1',null,'这是一个大大的h1')
const myh1 = React.createElement('h1',{id: 'myh1',title: 'this is h1'},'这是一个大大的h1')

5.渲染：

1	ReactDOM.render(myh1,document.getElementById('app'))

配置webpack可以看传送门

8.JSX语法

符合xml规范的JS语法；（语法格式上来说，要比HTML严谨）

1.启用jsx语法

安装bable插件
- 运行 cnpm i @babel/core babel-loader babel-plugin-transform-runtime @babel/runtime -D
- 运行cnpm i @babel/preset-env -D (语法)
安装能够识别转换jsx语法的包babel-preset-react （JSX变成能识别的react）
- 运行cnpm i @babel/preset-react -D
添加.babelrc配置文件

{
    "presets":[     //语法
        "@babel/preset-env",
        "@babel/preset-react"
    ], 
    
    "plugins":[     //插件
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties"
    ]
    }

2.JSX语法本质：

并不是直接把jsx渲染到页面上，而是在内部转换成createElement形式再渲染的。

3.jsx中混合写入js表达式：

要把js代码写在{}中

4.注释

推荐使用｛/* 这是注释 */｝

5.为元素添加class类名：

需要用className来替代class；htmlFor替换label的for属性

6.在JSX创建DOM时，所有的节点，必须有唯一的根元素进行包裹

7.在JSX语法中，标签必须成对出现，如果是单标签要自闭和（比如<hr/>分割线）

编译过程<就把它当作HTML编译，碰到{}就当作普通JS代码。

Tips：

用([+-/开头的上一段结尾要加分号。
React中需要把key添加给 forEach或map或for循环直接控制的元素

9.React中创建组件

方法一

使用构造数。如果需要接受外界传递的数据，需要在狗在函数的参数列表中使用props来接收；必须要向外return一个合法的JSX创建的虚拟DOM；

创建组件：

function Hello(){
	//return null
	return <div>Hello zujian</div>
}

为组件传递数据

//使用组件并未组件传递props数据
<Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>

//在构造函数中，使用props形参，接收外界传来的数据
function Hello(props){
    //如果在一个组件中return一个null，则表示此组件是空的，什么都不会渲染
    //return null
    console.log(props)
    //props.name = 'zs'
    //组件中的props都是只读的，不能被重新赋值。
    return <div>zheshige hello </div>
}

方法二

本文作者： Raphael_Li
本文链接： https://lifei-2019.github.io/react-04/
版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！