React使用详解(学习笔记)
一、定义变量修饰符
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 (
这是展示组件{props.xxx}
)
};b). 容器型组件：(一般一个页面对应一个容器组件，里面会引入其他的展示组件作为子组件，除了数据展示还有复杂的业务逻辑)
示例代码:
import React, { Component } from 'react';
class ContainerComponent extends Component {
//定义业务逻辑
ContainerComponent(props){
super(props);
this.state = {
aaa:'aaa';
....
}
}
render() {
return (
容器型组件
)
}
}
七、获取某个dom节点
a.使用ref属性获取：(推荐) this.refs.xxx
比如
在运行中可以通过 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）使用：点我跳转到detail 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 (
//向子组件传递了name、age属性
)
}
}
//子组件的定义
const Children = ({name, age}) =>{
return(
子组件读取不到state中的值，但是能通过props从父组件获取
读取到props中的name={name}，age={age}
);
};
//属性检查
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 (
//子组件向父组件传递值的思想：
//父组件定义一个方法用于接收子组件传递过来的值并将该方法通过props传递给子组件，在子组件调用父组件传递过去的方法即可
this.handleChildrenData(name)}/>
)
}
}
export default Parent;
//子组件
export default class Children extends React.Component {
render() {
//获取从父组件传递的方法
const {handleDataListener} = this.props;
return (
);
}
}
Children.propTypes = {
exportClickListener: PropTypes.func
};此文章为做项目时学习总结，仅供参考，一起学习，共同进步！