以下内容,当具备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