React 基础知识点复习

react难点:组件怎么拆分? 单一原则,只干一件事,功能简单,不复用不拆,考虑迭代
数据放在哪里?

【数据】
props:数据传递
state:私有状态(用户输入、默认属性)
数据尽量给顶层组件
为什么用setState? 因为虚拟dom没完成更新,且修改的是复制的state
setState:在原来的基础上进行合并,异步,解决:this.setState(function(prevState,props){})
钩子(获取默认属性):getDefaultProps、getInitialState

【值类型】
字符 ||{表达式/arr/json/undefined/number/fn}
{json}报错 {json.key}

【组件渲染】
ReactDom.render(组件,dom)
React.createClass({配置})

【数据交互】
jQ、原生ajax、fetch
fetch返回的值是二进制的buff流,需要转换res.json()和res.text()。返回一个promise。
和fetchjsonp组件 .then().catch()

【css模块化】
使用style.类名

【事件】
ev.target.value

【tips】
1.react 一旦会复用,就做成组件
2.尽量用无状态组件(不能访问this对象,只能访问props,纯函数,无需实例化,性能高)
3.传值思路
a) 子-父-子
b) pub/sub
c) 状态管理


react的生命周期

创建期
getDefaultProps()

getInitialState() 初始化state

constructor(props,context) 创建组件调用

componentWillMount() 挂载前调用 这里调用setState, render更新state并且只渲染一次

componentDidMount() 组件挂载之后调用一次,子组件页挂载好,可以使用refs

shouldComponentUpdate(nextProps,nextState) 挂载后,每次调用setState都会调用shouldComponentUpdate判断是否需要重新渲染。当数据改变不影响页面展示,可以在这里做判断,优化渲染效率

存在期
ComponentWIllReceiveProps(nextProps) 通过props传入的值和setState修改

componentWillUpdate(nextProps,nextState) 收到新的props和state后调用

componentDidUpdate() 更新后调用

render() 核心函数,不要在render中修改state

销毁期
componentWillUnmount() 组件被卸载时候调用

这里写图片描述

在react中,触发render的有4条路径:
• 首次渲染Initial Render
• 调用this.setState (并不是一次setState会触发一次render,React可能会合并操作,再一次性进行render)
• 父组件发生更新(一般就是props发生改变,但是就算props没有改变或者父子组件之间没有数据交换也会触发render)
• 调用this.forceUpdate

react-router(组件式开发)

react-router@4.0版本有巨坑。。以下为3.0版本

路由:(用来url切换导入新的组件)
Router 路由对象
Route 一个理由配置
hashHistory 哈希模式
IndexRoute 默认路由
Link 路由调用
Redict 重定向
browserHistory 历史记录

路由组件设为无状态组件^_^

【展示区】:{this.props.children}
路由path=“:aid?a=1&b=2”为下层的
子组件上的路由参数:
this.props.params接收的是{aid:xx}
this.props.location.query接收的是 {a:1,b:2}
this.props.location.pathname

【路由跳转】 redirect from=“” to=“”
route path=“*” component=“error”

【激活的路由样式】
activeClassName=“active”
activeStyle={{background:red}}
{json}模式

【链接的另一种方式】
Link to={{pathname:“/news/004”,query:{a:1,b:2}}}

【函数内路由】
window.history.push()
browserHistory.push()
this.props.router.push(“”);
替换 replace

【browserHistory】
需要在package中配置 —history-api-failback
router设置 history=“browserHistory”

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值