美文网首页
react使用笔记

react使用笔记

作者: hello_water | 来源:发表于2018-03-05 10:57 被阅读23次
image.png
https://reactjs.org/docs/components-and-props.html#functional-and-class-components

代码分割require.ensure http://www.css88.com/doc/webpack2/guides/code-splitting-require/

react默认路由问题:https://github.com/ReactTraining/react-router/issues/4732 加exact

webpack打包之后传文件特别烦人,目录混乱

先了解react有哪些关键组件

  • this.setState对参数进行修改之后,就一定会重新执行render()方法;this.state对参数进行修改,不会触发重新渲染。
  • this.propsthis.state 可能是异步更新的
  • 组件名称必须以大写字母开头。
  • 组件不能修改它自己的props。
  • 在react中不能使用return false来阻止默认事件,必须明确使用preventDefault来阻止默认事件。
  • 通过 bind 方式向监听函数传参(this.clickEvent.bind(this, par1)),在类组件中定义的监听函数,事件对象 e 要排在所传递参数的后面:clickEvent(par1, e){...}
  • 使用map()方法遍历数组,给回调函数中返回的元素上加一个属性key,值最好是元素唯一标识。https://doc.react-china.org/docs/reconciliation.html#%E9%80%92%E5%BD%92%E5%AD%90%E8%8A%82%E7%82%B9
  • <input type="text">, <textarea>, 和 <select> 都十分类似 - 他们都通过传入一个value属性来实现对组件的控制
    *当 props.message 为空数组时,它会打印0:
<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

要解决这个问题,请确保 && 前面的表达式始终为布尔值:

<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

相反,如果你想让类似 falsetruenullundefined 出现在输出中,你必须先把它转换成字符串

  • 使用 PropTypes 进行类型检查
  • 使用Fragments聚合一个子元素列表,并且不在DOM中增加额外节点<><List /></>,其实是< React.Fragment>< React.Fragment />的语法糖。但是preact不支持这种语法糖,preact该怎样使用呢?
  • hash值切换后浏览器缓存问题,没有刷新组件
    --第一次使用#base/page进入时候,会执行WillMount方法,更改路由为#base时候,不会执行WillMount,即使路由更改为#base/page2也不会执行WillMount

react和react native分别能做什么?

react react native
html开发 app开发
以浏览器DOM作为后端 以iod或android原生控件作为后端
react直接渲染dom rn生成id,用bridge变成一个表,等待native去调用

react-router和react-router-dom的区别

react-router react-router-dom
实现路由的核心功能 基于react-router,加入了在浏览器运行环境下的一些功能,比如:Link组件,BroswerRouter、HahsRouter组件。
BroswerRouter使用pushState和popState事件构建路由。
HahsRouter使用window.location.hash和hashchange事件构建路由。
依赖于react-router,只需要显示安装react-router-dom

*react-router-reduxReact Router 和 Redux 的集成
*react-router-config 静态路由配置的小助手
*react-router-native 用于 React Native 的 React Router
*BroswerRouter使用html5 history API

Router的使用方法
Link的使用方法

HashRouter

  • 借助url中的hash来实现路由。
    *属性:
  • basename:url的主目录,
    <HashRouter basename="/calendar"/><Link to="/today"/> // renders <a href="#/calendar/today">
  • getUserConfirmation:用于确认导航的功能。默认使用window.confirm。
    // this is the default behavior
    const getConfirmation = (message, callback) => { const allowTransition = window.confirm(message) callback(allowTransition) }
    <HashRouter getUserConfirmation={getConfirmation}/>
  • hashType:设置url中hash格式
  • slash:格式类似#/#/home
  • noslash:格式类似##home
  • hashbang:格式类似#!/#!/home
    默认是slash
  • children:node
  • HashRouter的子节点只能有一个,如果有多个使用一个div包起来。

BrowserRouter

  • 依赖于HTML5 history API实现的路由机制
  • 属性:
  • basename:url的主目录,
    <HashRouter basename="/calendar"/><Link to="/today"/> // renders <a href="#/calendar/today">
  • getUserConfirmation:用于确认导航的功能。默认使用window.confirm。
    // this is the default behavior
    const getConfirmation = (message, callback) => { const allowTransition = window.confirm(message) callback(allowTransition) }
    <HashRouter getUserConfirmation={getConfirmation}/>
  • forceRefresh:设置为true时,页面切换后会全页刷新,该属性适用于那些不支持HTML5 history API的浏览器。const supportsHistory = 'pushState' in window.history; <BrowserRouter forceRefresh={!supportsHistory}/>
  • children: node
  • BrowserRouter的子节点只能有一个,如果有多个使用一个div包起来。

Switch使用方法

NavLink

Prompt

history

location

match

相关文章

网友评论

      本文标题:react使用笔记

      本文链接:https://www.haomeiwen.com/subject/dukfzxtx.html