React使用详解(学习笔记)

一、定义变量修饰符

二、变量赋值

三、变量添加默认值

四、方法默认参数

五、import引入问题

七、获取某个dom节点

八、类型检测

九、获取路由的参数

十、页面跳转

十一、箭头函数

十二、组件间的通信

一、定义变量修饰符

1、const：定义常量时用

const name = “weishihuai”; //const表示常量，类似java的final
name = “hello weishihuai”; //编译出错，常量不能被修改，必须在定义时赋值

2、var：现在一般放在方法外部使用

var name ; //在方法中定义作为局部变量，在方法外定义作为全局变量
name = “weishihuai”; //var定义的变量可以修改，如果不初始化会输出undefined，不会报错。

3、let：局部变量尽量用let

let name = “weishihuai”; //let是块级作用域，函数内部使用let定义后，对函数外部无影响。
name = “hello” //与var的主要区别就是作用域不同

- 建议使用 let 和 const 代替 var

二、变量赋值

使用{}赋值，可同时赋值多个变量

let object = {
name:"weishihuai",
age:18,
address:"广州市科韵路天河软件园"
}let {name,age} = object;
等价于:
let name = object.name; //weishihuai
let age = object.age; //18
let address = object.address //广州市科韵路天河软件园

三、变量添加默认值

有时候，我们从state或者请求回来的object或者array为空的，直接使用对象.属性、数组.map() 等方法时会报undefined。这时候可以指定默认值防止报错。
具体使用方法：

let name = this.state.name || ‘weishihuai’；
等价于：
let name = this.state.name;
if (null === name || typeof name === ‘undefined’ || ‘’ === name || name.length === 0){
name = ‘weishihuai’
} else {
…
}

四、方法默认参数

function (a = 1, b){
}
等价于
function (a , b) {
if (typeof a === 'undefined'){
a = 1;
}
}

五、import引入问题

import XXX from ‘abc’ 与 import {XXX} from ‘abc’ 的区别？

如果abc.js中使用了：export default XXX，则不需要使用{}，并且引入时可以自定义引入后的名字
如果abc.js中没有：export default XXX，而是：export XXX，则需要添加{}，并且引入的名字必须与export的名字一致
所以我们的页面尽量添加：export default XXX 而不是：export XXX

六、组件定义方法

a). 展示型组件：（仅用于数据展示，无复杂逻辑）

示例代码：

import React from 'react';
//展示型组件(也叫无状态(state)组件)
//展示型组件的数据全都由父组件通过props传递进来，属于无状态组件
const XXX = ({props}) => {
return (
<div >
这是展示组件{props.xxx}
</div>
)
};

b). 容器型组件：(一般一个页面对应一个容器组件，里面会引入其他的展示组件作为子组件，除了数据展示还有复杂的业务逻辑)

示例代码:

import React, { Component } from 'react';
class ContainerComponent extends Component {
//定义业务逻辑
ContainerComponent(props){
super(props);
this.state = {
aaa:'aaa';
....
}
}render() {
return (
<div >
容器型组件
</div>
)
}
}

七、获取某个dom节点

a.使用ref属性获取：(推荐) this.refs.xxx

比如 <input onChange={this.setName.bind(this)} ref={'nameInput'}/>
在运行中可以通过 let nameInput = this.refs.nameInput; 获取到该input的dom节点

b.使用原生js方法获取

document.getElementById('continer')

c. react原生函数findDOMNode获取

ReactDOM.findDOMNode()

d. 使用jquery获取(不推荐)

八、类型检测

import PropTypes from 'prop-types';
XXX.propsTypes = {
name: PropTypes.string.isRequired,
hobby: PropTypes.array,
onFinish: PropTypes.func,
age: PropTypes.number,
info: PropTypes.object
};

九、获取路由的参数

路径参数（适合参数的个数固定不变的情况。比如详情页面带上id）
1）路由格式：/detail/:id
2）获取：let name = this.props.match.params.id
查询参数（适合参数的个数不固定的情况。比如列表页面带上查询参数）
1）路由格式：/xxxx?key=value
2）获取：this.props.location.search，获取到的值是?key=value格式的字符串
3）遗憾的是，我们不能this.props.location.search.age获取到age属性值，只能获取到一个字符串。最后需要自己手动解析成可读参数

十、页面跳转

标签类型的跳转。使用Link，URL会更新，组件会被重新渲染，但是页面不会重新加载。

1）引入Link：import {Link} from 'react-router-dom';
2）使用：<Link to='/detail'>点我跳转到detail</Link>
3）其中to的值就是配置的路由值

js类型的跳转。

1）跳转到新页面：this.props.history.push('/test')
2）返回上一页：this.props.history.goBack();

十一、箭头函数

1、name => console.log(name) 或 (name) => {console.log(name)}
等价于
function(name) {
console.log(name)
}2、(a,b) => return a + b
等价于
function(a,b){
return a + b;
}

十二、组件间的通信

a). 父组件 >> 子组件

//父组件
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'weishihuai',
age: 18
};
}render() {
let {name,age} = this.state;
return (
<div >
//向子组件传递了name、age属性
<Children name={name} age={age}/>
</div>
)
}
}//子组件的定义
const Children = ({name, age}) =>{
return(
<div>
<p>子组件读取不到state中的值，但是能通过props从父组件获取</p>
<p>读取到props中的name={name}，age={age}</p>
</div>
);
};//属性检查
Children.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number
};export default Children

b). 子组件 >> 父组件

//Parent
class Parent extends React.Component {
handleChildrenData = (name) => {
console.log(name); //weishihuai
};
render() {
return (
<div>
//子组件向父组件传递值的思想：
//父组件定义一个方法用于接收子组件传递过来的值并将该方法通过props传递给子组件，在子组件调用父组件传递过去的方法即可
<Children handleDataListener={(name)=>this.handleChildrenData(name)}/>
</div>
)
}
}
export default Parent;//子组件
export default class Children extends React.Component {
render() {
//获取从父组件传递的方法
const {handleDataListener} = this.props;
return (
<div>
<Button type="primary" ghost onClick={() => handleDataListener('weishihuai')}>子组件向父组件传值</Button>
</div>
);
}
}Children.propTypes = {
exportClickListener: PropTypes.func
};

此文章为做项目时学习总结，仅供参考，一起学习，共同进步！