三天上手React项目
以下内容,当具备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
state和props和render
state: 组件自己内部维护数据,可根据实际逻辑进行赋值,更改等操作
props: 父->子,所有传递过来的数据都附加在props中,子在props中可以拿到所有父传递过来的数据
render: 只要state进行set操作,render一定会执行,包括父state进行set之后,父和子的render都会被执行
ajax接参数
- 子组件是UI组件,接完父组件数据直接使用,可直接在子组件props中直接使用父组件ajax请求获取到的数据
- 子组件需要将父组件ajax数据赋值到自己的state中,只能在componentWillReceiveProps生命周期中处理,不能在constructor中处理,原因: 父组件ajax请求最起码第二次render父组件,而子组件中constructor只会执行一次
生命周期(重要)
以下是使用场景和注意点
componentWillMount: 不能获取页面dom元素,目前还没用过
componentDidMount: 可获取dom元素,ajax请求放这里,调用setState,设置dom元素监听,绘制canvas
componentWillReceiveProps: 上述已经提到
shouldComponentUpdate: 返回布尔值,可做渲染优化,根据场景决定是否渲染该组件,不要调用setState
componentDidUpdate: 更新dom,绘制canvas,调用setState
componentWillUnmount: 取消网络请求,删除监听,一些收尾工作,不要调用setState
react中this指向
- 自定义函数的时候,写自定义函数,需要在constructor中进行函数this指向的绑定
- 在constructor中进行this指向绑定,然后写正常函数
// 方式1
getTodoItem = () => {
// 你的逻辑
}
// 方式2
constructor(props) {
super(props)
this.inputOnChange = this.inputOnChange.bind(this)
}
inputOnChange() {
// 你的逻辑
}两款chrome插件
- React Developer Tools // F12,查看每个react组件中state和props的值
- Redux DevTools // F12,查看redux中store的值