react使用笔记

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.props 和 this.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>

相反，如果你想让类似 false、true、null 或 undefined 出现在输出中，你必须先把它转换成字符串

• 使用 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