以下内容, 当具备 ES6,JS 语法,node 环境, 前端组件基础概念, 写过 java 代码, 包你 3 天上手 React 项目, 下面开始 …
react 介绍
- react: 一个 js 框架, 让开发者可以在 js 中写 html 代码, 也就是jsx 语法, 称为虚拟 dom(类似一个 js 对象)
- react-dom: 挂载节点, 将 jsx 写的虚拟 dom 变成真的 dom
- render: 每次都是新旧虚拟 dom 之间进行比较, 之后才会生成真实 dom
创建 react 项目
命令行使用 npx create-react-app my-app-name 即可创建项目
react 中组件(子父之间传值)
A: 父组件 B: 子组件
在 A.js 文件中使用 <B name={name} getName={this.getName}> 其中 name 为 A 文件中一个变量,getName 为 A 文件中一个方法
在 B.js 文件中, 可直接使用 this.props.name 或this.props.getName或 const {name, getName} = this.props 来得到 A 中变量, 或运行 A 中方法, 最后一种最常用, 这种方式是 ES6 中新增的解构赋值.
父 -> 子 通过子标签上加上属性的方式, 直接传递, 在子重使用 this.props 来接住属性
子 -> 父 通过在子中调用父传递的方法来完成
具体使用场景: 一个页面右上角挂载一个三级联动选项卡(三级数据从接口获取),main 作为父组件主页面,select 作为子组件三级选项卡页面
- main 页面负责 ajax 请求, 拿总数据, 为子组件准备好所有即插即用数据和方法, 在使用 select 标签的时候, 全部传递给子
- select 页面, 在 this.props 中负责解构所有数据和方法, 直接使用, 无需关心逻辑实现
- main 叫逻辑组件(聪明组件), select 叫 UI 组件(笨蛋组件)
JSX 语法
- 在 js 中 直接 写 html 语法, 也可以使用自定义标签, 比如可以写自己组件,App 组件可以写成 <App />,首字母必须大写开头,JSX 标签中, 大写开头, 基本都是组件, 小写开头基本是 html 标签
- render 中用 JSX 语法写 html 代码,* 必须在最外层包括一个 div, 不然编译会报错, 在 16 版本中, 如果使用 Fragment 来表示占位符, 在 html 中显示的时候, 可去掉组件最外层的那个 div.
- 使用 js 表达式需要使用 {} 把表达式包裹起来
- html 标签中进行事件绑定,事件名称首字母必须大写, 比如 onChange 中 C 就是大写的
- 在 html 样式中, 使用 className 来代替 class
- 使用 dangerouslySetInnerHTML={{__html: item}}, 可在提交数据的时候, 对数据中 html 标签进行转义处理
- <label for=”insertArea”> 输入内容 </label> for 需要换成 htmlfor
事件绑定(带参数绑定)
jsx 绑定事件, 如果事件中要传递参数, 应该像下面那样传递
<li onClick={(index) => this.props.delItem(index)}>{item}</li>构造函数
只会执行一次, 一般在这里是接收父的 props 数据, 然后来初始化自己的 state