React简书开发实战课程笔记——1

这是我在看了imooc中的React简书开发实战课程之后记下的笔记,在这做下备份,以便日后复习。


安装一下脚手架:

npx create-react-app my-app
cd my-app
npm start

一、dangerouslySetInnerHTML属性

当React元素包含html标签时,如果不设置dangerouslySetInnerHTML属性,就会把html当做字符串处理:

render() {
  const value = '<h1>Hello World</h1>';
  return (
     <div>{value}</div>
  );
}

浏览器中会输出:<h1>Hello World</h1>

如果想让html标签起作用,就要用到dangerouslySetInnerHTML属性:

render() {
  const value = '<h1>Hello World</h1>';
  return (
     <div dangerouslySetInnerHTML={{__html: value}}></div>
  );
}

浏览器中输出:

Hello World

启用dangerouslySetInnerHTML属性,可能会受到XSS攻击


二、JSX中需要注意的地方
  • 注释的写法
    {/* 这里是注释 */}
    或者是
    {
    //这里是注释
    }
  • 需要注意的两个属性名
    html中label标签的for属性,在JSX中要替换为htmlFor
    html中class属性,在JSX中要替换为className

三、this.setState

作用:修改this.state

一般用法:

this.setState({
  value: myValue
});

这种用法有一个缺陷,就是使用this.setState修改this.state之后,页面并不会立即重新渲染,而是等组件的render方法重新执行的时候才会去重新渲染页面。
这样,多次调用this.setState产生的效果会合并。

关于this.setState推荐一篇好文章:setState:这个API设计到底怎么样

如果想要this.setState的效果立即生效,就要使用它的函数式用法:

this.setState(() => {
  return {
    value: myValue
  }
});

可以简写成:

this.setState(() => ({
    value: myValue
}));

this.setState可以有一个prevState参数:

this.setState((prevState) => ({  //prevState 等价于 this.state
  //...
}));

this.setState还可以有一个回调函数:

this.setState((prevState) => ({
  //...
}), () => {
  console.log('这是回调函数');
});

四、PropTypes

PropTypes有两种用法:一是检测组件间传递的属性的类型,二是为组件间传递的属性设置默认值

使用首先需要添加一句话:

import PropTypes from 'PropTypes';

用法一:检测组件间传递的属性的类型
PropTypes.类型名,用于限制子组件从父组件接收的参数类型

App.propTypes = {  //App是一个组件名
  //下面的oneOfType方法表示content的类型可以是string和number
  content: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 
  deleteItem: PropTypes.func,
  index: PropTypes.number.isRequired  //isRequired  表示这个参数不能为空
}

内置的PropTypes有:

PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string

用法二:为组件间传递的属性设置默认值
当该组件没有接受到指定的参数时,就用默认值为这个参数赋值

App.defaultProps = {  //App是个组件名
  content: 'hello world'
}

五、ref属性
//this.state = { value: '' };

//tar和this.input中的input都可以是任意字符
<input ref={(tar) => {this.input = tar}} onChange={this.handleInputChange}></input>

handleInputChange() {
  this.setState(() => ({
    value: this.input.value
  }));
}

上面的tar就指向了ref所在的DOM元素,将其赋值给this.input,这样this.input就等价于e.target

上面的this.input一旦被定义之后,在整个render方法中都是可以获取到的,作用并不局限于代替e.target

这个属性不推荐使用,因为直接操作DOM不符合React的面向数据的思想


六、生命周期函数

在这里插入图片描述

Mounting时期:
componentWillMount  //组件被挂载到页面之前执行(只会执行一次)
componentDidMount  //组件被挂载到页面之后执行(只会执行一次)

Updation时期:
//当子组件将要从父组件接收参数时执行
//如果这个子组件第一次存在于父组件中,不会执行
//当这个子组件仍存在于父组件中,才会被执行
componentWillReceiveProps

//componentWillReceiveProps之后,componentWillUpdate之前执行
//用于判断页面是否需要被更新
//需要有返回值(Boolean类型): true 页面需要更新,false 页面不需要更新
shouldComponentUpdate

componentWillUpdate  //组件将要被更新之前执行
componentDidUpdate  //组件更新完成之后被执行

Unmount时期:
componentWillUnmount  //当组件将要从页面去除的时候执行

声明周期函数的一些实际应用:

1.shouldComponentUpdate

//this.state = { content: '' };

//由于父组件render重新执行时,子组件的render也会被强制执行,
//此时子组件的数据并不一定改变,所以子组件并不一定需要重新执行render
//可以利用shoudlComponentUpdate函数,判断子组件的数据是否也发生了改变
//这样可以避免子组件做不必要的渲染,提高性能
shouldComponentUpdate(nextProps, nextState) {  //两个参数分别表示:传进来的props和state
  if (nextProps.content !== this.props.content) {
    return true;
  } else {
    return false;
  }
}

2.componentDidMount

//当使用ajax获取数据的时候,如果只用ajax获取一次数据
//那么将ajax代码放在componentDidMount中比较合适
	
//eg: 利用axios扩展发送ajax请求:
//先安装axios扩展: npm install axios
//重启localhost:3000

import axios from 'axios';

componentDidMount() {  //将只获取一次数据的ajax代码放在这个函数里
  axios.get('/api/todolist')
    .then(() => {alert('succ')})
    .catch(() => {alert('error')})
}

然后用charles工具模拟出接口数据测试上面的ajax请求是否有效。


七、charles本地模拟数据接口报404:

我用charles在本地模拟接口数据时一直会报404,后来发现用node运行react占用了3000端口,所以charles无法在3000端口模拟数据,不知道我看的那个课程视频上为什么可以。百度,谷歌翻烂也没找到答案。还好后来发现了一个在线mock接口数据的网站,终于又可以模拟数据愉快的玩耍啦!
传送门:Mock your HTTP responses to test your REST API


如有错误或不足,欢迎评论指正~

待续…

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值