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-redux
React 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包起来。
网友评论