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:格式类似#/和#/homenoslash:格式类似#和#homehashbang:格式类似#!/和#!/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包起来。
