react-route和children

最新推荐文章于 2024-04-18 13:10:30 发布

u010678473

最新推荐文章于 2024-04-18 13:10:30 发布

阅读量2.5k

点赞数

2.使用
我们直接上例子：

import React from 'react'
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'

const Basic = () => (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/page1">Page1</Link></li>
<li><Link to="/page2">Page2</Link></li>
</ul>

<hr/>

<Route exact path="/" component={Home}/>
<Route path="/page1" component={Page1}/>
<Route path="/page2" component={Page2}/>
</div>
</Router>
)

跟之前的版本一样，Router这个组件还是一个容器，但是它的角色变了，4.0的Router下面可以放任意标签了，这意味着使用方式的转变，它更像redux中的provider了。通过上面的例子相信你也可以看到具体的变化。而真正的路由通过Route来定义。Link标签目前看来也没什么变化，依然可以理解为a标签，点击会改变浏览器Url的hash值，通过Route标签来捕获这个url并返回component属性中定义的组件，你可能注意到在为"/"写的路由中有一个exact关键字，这个关键字是将"/"做唯一匹配，否则"/"和"/xxx"都会匹配到path为"/"的路由，制定exact后，"/page1"就不会再匹配到"/"了。如果你不懂，动手试一下~

通过Route路由的组件，可以拿到一个match参数，这个参数是一个对象，其中包含几个数据：

isExact：刚才已经说过这个关键字，表示是为作全等匹配
params:path中包含的一些额外数据
path:Route组件path属性的值
url:实际url的hash值
我们来实现一下刚才的Page2组件：

const Page2 = ({ match }) => (
<div>
<h2>Page2</h2>
<ul>
<li>
<Link to={`${match.url}/branch1`}>
branch1
</Link>
</li>
<li>
<Link to={`${match.url}/branch2`}>
branch2
</Link>
</li>
<li>
<Link to={`${match.url}/branch3`}>
branch3
</Link>
</li>
</ul>

<Route path={`${match.url}/:branchId`} component={Branch} />
<Route exact path={match.url} render={() => (
<h3>Default Information</h3>
)} />
</div>
)

const Branch = ({ match }) => {
console.log(match);
return (
<div>
<h3>{match.params.branchId}</h3>
</div>
)
}

很简单，动手试一试。需要注意的就只有Route的path中冒号":"后的部分相当于通配符，而匹配到的url将会把匹配的部分作为match.param中的属性传递给组件，属性名就是冒号后的字符串。

3.Router标签
细心的朋友肯定注意到了上面的例子中我import的Router是BrowserRouter，这是什么东西呢？如果你用过老版本的react-router，你一定知道history。history是用来兼容不同浏览器或者环境下的历史记录管理的，当我跳转或者点击浏览器的后退按钮时，history就必须记录这些变化，而之前的react-router将history分为三类。

hashHistory 老版本浏览器的history
browserHistory h5的history
memoryHistory node环境下的history，存储在memory中
4.0之前版本的react-router针对三者分别实现了createHashHistory、createBrowserHistory和create MemoryHistory三个方法来创建三种情况下的history，这里就不讨论他们不同的处理方式了，好奇的可以去了解一下~
到了4.0版本，在react-router-dom中直接将这三种history作了内置，于是我们看到了BrowserRouter、HashRouter、MemoryRouter这三种Router，当然，你依然可以使用React-router中的Router，然后自己通过createHistory来创建history来传入。

react-router的history库依然使用的是 https://github.com/ReactTraining/history

4.Route标签
在例子中你可能注意到了Route的几个prop

exact: propType.bool
path: propType.string
component: propType.func
render: propType.func
他们都不是必填项，注意，如果path没有赋值，那么此Route就是默认渲染的。
Route的作用就是当url和Route中path属性的值匹配时，就渲染component中的组件或者render中的内容。

当然，Route其实还有几个属性，比如location，strict,chilren 希望你们自己去了解一下。

说到这，那么Route的内部是怎样实现这个机制的呢？不难猜测肯定是用一个匹配的方法来实现的，那么Route是怎么知道url更新了然后进行重新匹配并渲染的呢？

整理一下思路，在一个web 应用中，改变url无非是2种方式，一种是利用超链接进行跳转，另一种是使用浏览器的前进和回退功能。前者的在触发Link的跳转事件之后触发，而后者呢？Route利用的是我们上面说到过的history的listen方法来监听url的变化。为了防止引入新的库，Route的创作者选择了使用html5中的popState事件，只要点击了浏览器的前进或者后退按钮，这个事件就会触发，我们来看一下Route的代码：

class Route extends Component {
static propTypes: {
path: PropTypes.string,
exact: PropTypes.bool,
component: PropTypes.func,
render: PropTypes.func,
}

componentWillMount() {
addEventListener("popstate", this.handlePop)
}

componentWillUnmount() {
removeEventListener("popstate", this.handlePop)
}

handlePop = () => {
this.forceUpdate()
}

render() {
const {
path,
exact,
component,
render,
} = this.props

//location是一个全局变量
const match = matchPath(location.pathname, { path, exact })

return (
//有趣的是从这里我们可以看出各属性渲染的优先级，component第一
component ? (
match ? React.createElement(component, props) : null
) : render ? ( // render prop is next, only called if there's a match
match ? render(props) : null
) : children ? ( // children come last, always called
typeof children === 'function' ? (
children(props)
) : !Array.isArray(children) || children.length ? ( // Preact defaults to empty children array
React.Children.only(children)
) : (
null
)
) : (
null
)
)
}
}

这里我只贴出了关键代码，如果你使用过React，相信你能看懂，Route在组件将要Mount的时候添加popState事件的监听，每当popState事件触发，就使用forceUpdate强制刷新，从而基于当前的location.pathname进行一次匹配，再根据结果渲染。

PS：现在最新的代码中，Route源码其实是通过componentWillReceiveProps中setState来实现重新渲染的，match属性是作为Route组件的state存在的.

那么这个关键的matchPath方法是怎么实现的呢？
Route引入了一个外部library：path-to-regexp。这个pathToRegexp方法用于返回一个满足要求的正则表达式，举个例子：

let keys = [],keys2=[]
let re = pathToRegexp('/foo/:bar', keys)
//re = /^\/foo\/([^\/]+?)\/?$/i keys = [{ name: 'bar', prefix: '/', delimiter: '/', optional: false, repeat: false, pattern: '[^\\/]+?' }]

let re2 = pathToRegexp('/foo/bar', keys2)
//re2 = /^\/foo\/bar(?:\/(?=$))?$/i keys2 = []
关于它的详细信息你可以看这里:https://github.com/pillarjs/path-to-regexp

值得一提的是matchPath方法中对匹配结果作了缓存，如果是已经匹配过的字符串，就不用再进行一次pathToRegexp了。

随后的代码就清晰了：

const match = re.exec(pathname)

if (!match)
return null

const [ url, ...values ] = match
const isExact = pathname === url

//如果exact为true，需要pathname===url
if (exact && !isExact)
return null

return {
path,
url: path === '/' && url === '' ? '/' : url,
isExact,
params: keys.reduce((memo, key, index) => {
memo[key.name] = values[index]
return memo
}, {})
}
5.Link
还记得上面说到的改变url的两种方式吗，我们来说说另一种，Link，看一下它的参数：

static propTypes = {
onClick: PropTypes.func,
target: PropTypes.string,
replace: PropTypes.bool,
to: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object
]).isRequired
}
onClick就不说了，target属性就是a标签的target属性，to相当于href。
而replace的意思跳转的链接是否覆盖history中当前的url，若为true,新的url将会覆盖history中的当前值，而不是向其中添加一个新的。

handleClick = (event) => {
if (this.props.onClick)
this.props.onClick(event)

if (
!event.defaultPrevented && // 是否阻止了默认事件
event.button === 0 && // 确定是鼠标左键点击
!this.props.target && // 避免打开新窗口的情况
!isModifiedEvent(event) // 无视特殊的key值，是否同时按下了ctrl、shift、alt、meta
) {
event.preventDefault()

const { history } = this.context.router
const { replace, to } = this.props

if (replace) {
history.replace(to)
} else {
history.push(to)
}
}
}
需要注意的是，history.push和history.replace使用的是pushState方法和replaceState方法。

6.Redirect
我想单独再多说一下Redirect组件，源码很有意思：

class Redirect extends React.Component {
//...省略一部分代码

isStatic() {
return this.context.router && this.context.router.staticContext
}

componentWillMount() {
if (this.isStatic())
this.perform()
}

componentDidMount() {
if (!this.isStatic())
this.perform()
}

perform() {
const { history } = this.context.router
const { push, to } = this.props

if (push) {
history.push(to)
} else {
history.replace(to)
}
}

render() {
return null
}
}
很容易注意到这个组件并没有UI，render方法return了一个null。很容易产生这样一个疑问，既然没有UI为什么react-router的创造者依然选择将Redirect写成一个组件呢？

子组件
我们有一个组件 <Grid /> 包含了几个组件 <Row /> 。你可能会这么使用它：

<Grid>
<Row />
<Row />
<Row />
</Grid>
这三个 Row 组件都成为了 Grid 的 props.children 。使用一个表达式容器，父组件就能够渲染它们的子组件：

class Grid extends React.Component {
render() {
return <div>{this.props.children}</div>
}
}
父组件也能够决定不渲染任何的子组件或者在渲染之前对它们进行操作。例如，这个 <Fullstop /> 组件就没有渲染它的子组件：

class Fullstop extends React.Component {
render() {
return <h1>Hello world!</h1>
}
}
不管你将什么子组件传递给这个组件，它都只会显示“Hello world!”

任何东西都能是一个child
React中的Children不一定是组件，它们可以使任何东西。例如，我们能够将上面的文字作为children传递我们的 <Grid /> 组件。

<Grid>Hello world!</Grid>
JSX将会自动删除每行开头和结尾的空格，以及空行。它还会把字符串中间的空白行压缩为一个空格。

这意味着以下的这些例子都会渲染出一样的情况：

<Grid>Hello world!</Grid>

<Grid>
Hello world!
</Grid>

<Grid>
Hello
world!
</Grid>

<Grid>

Hello world!
</Grid>
你也可以将多种类型的children完美的结合在一起：

<Grid>
Here is a row:
<Row />
Here is another row:
<Row />
</Grid>
child 的功能
我们能够传递任何的JavaScript表达式作为children，包括函数。

为了说明这种情况，以下是一个组件，它将执行一个传递过来的作为child的函数：

class Executioner extends React.Component {
render() {
// See how we're calling the child as a function?
// ↓
return this.props.children()
}
}
你会像这样的使用这个组件

<Executioner>
{() => <h1>Hello World!</h1>}
</Executioner>
当然，这个例子并没什么用，只是展示了这个想法。

假设你想从服务器获取一些数据。你能使用多种方法实现，像这种将函数作为child的方法也是可行的。

<Fetch url="api.myself.com">
{(result) => <p>{result}</p>}
</Fetch>
不要担心这些超出了你的脑容量。我想要的是当你以后遇到这种情况时不再惊讶。有了children什么事都会发生。

操作children
如果你看过React的文档你就会说“children是一个不透明的数据结构”。从本质上来讲， props.children 可以使任何的类型，比如数组、函数、对象等等。

React提供了一系列的函数助手来使得操作children更加方便。

循环
两个最显眼的函数助手就是 React.Children.map 以及 React.Children.forEach 。它们在对应数组的情况下能起作用，除此之外，当函数、对象或者任何东西作为children传递时，它们也会起作用。

class IgnoreFirstChild extends React.Component {
render() {
const children = this.props.children
return (
<div>
{React.Children.map(children, (child, i) => {
// Ignore the first child
if (i < 1) return
return child
})}
</div>
)
}
}
<IgnoreFirstChild /> 组件在这里会遍历所有的children，忽略第一个child然后返回其他的。

<IgnoreFirstChild>
<h1>First</h1>
<h1>Second</h1> // <- Only this is rendered
</IgnoreFirstChild>
在这种情况下，我们也可以使用 this.props.children.map 的方法。但要是有人讲一个函数作为child传递过来将会发生什么呢？this.props.children 会是一个函数而不是一个数组，接着我们就会产生一个error！

err
然而使用 React.Children.map 函数，无论什么都不会报错。

<IgnoreFirstChild>
{() => <h1>First</h1>} // <- Ignored ?
</IgnoreFirstChild>
计数
因为this.props.children 可以是任何类型的，检查一个组件有多少个children是非常困难的。天真的使用 this.props.children.length ，当传递了字符串或者函数时程序便会中断。假设我们有个child："Hello World!" ，但是使用 .length 的方法将会显示为12。

这就是为什么我们有 React.Children.count 方法的原因

class ChildrenCounter extends React.Component {
render() {
return <p>React.Children.count(this.props.children)</p>
}
}
无论时什么类型它都会返回children的数量

// Renders "1"
<ChildrenCounter>
Second!
</ChildrenCounter>

// Renders "2"
<ChildrenCounter>
<p>First</p>
<ChildComponent />
</ChildrenCounter>

// Renders "3"
<ChildrenCounter>
{() => <h1>First!</h1>}
Second!
<p>Third!</p>
</ChildrenCounter>
转换为数组
如果以上的方法你都不适合，你能将children转换为数组通过 React.Children.toArray 方法。如果你需要对它们进行排序，这个方法是非常有用的。

class Sort extends React.Component {
render() {
const children = React.Children.toArray(this.props.children)
// Sort and render the children
return <p>{children.sort().join(' ')}</p>
}
}
<Sort>
// We use expression containers to make sure our strings
// are passed as three children, not as one string
{'bananas'}{'oranges'}{'apples'}
</Sort>
上例会渲染为三个排好序的字符串。

sort
执行单一child
如果你回过来想刚才的 <Executioner /> 组件，它只能在传递单一child的情况下使用，而且child必须为函数。

class Executioner extends React.Component {
render() {
return this.props.children()
}
}
我们可以试着去强制执行 propTypes ，就像下面这样

Executioner.propTypes = {
children: React.PropTypes.func.isRequired,
}
这会使控制台打印出一条消息，部分的开发者将会把它忽视。相反的，我们可以使用在 render 里面使用 React.Children.only

class Executioner extends React.Component {
render() {
return React.Children.only(this.props.children)()
}
}
这样只会返回一个child。如果不止一个child，它就会抛出错误，让整个程序陷入中断——完美的避开了试图破坏组件的懒惰的开发者。

编辑children
我们可以将任意的组件呈现为children，但是任然可以用父组件去控制它们，而不是用渲染的组件。为了说明这点，让我们举例一个能够拥有很多 RadioButton 组件的 RadiaGroup 组件。

RadioButtons 不会从 RadioGroup 本身上进行渲染，它们只是作为children使用。这意味着我们将会有这样的代码。

render() {
return(
<RadioGroup>
<RadioButton value="first">First</RadioButton>
<RadioButton value="second">Second</RadioButton>
<RadioButton value="third">Third</RadioButton>
</RadioGroup>
)
}
这段代码有一个问题。input 没有被分组，导致了这样：

为了把 input 标签弄到同组，必须拥有相同的name 属性。当然我们可以直接给每个RadioButton 的name 赋值

<RadioGroup>
<RadioButton name="g1" value="first">First</RadioButton>
<RadioButton name="g1" value="second">Second</RadioButton>
<RadioButton name="g1" value="third">Third</RadioButton>
</RadioGroup>
但是这个是无聊的并且容易出错。我们可是拥有JavaScript的所有功能的！

改变children的属性
在RadioGroup 中我们将会添加一个叫做 renderChildren 的方法，在这里我们编辑children的属性

class RadioGroup extends React.Component {
constructor() {
super()
// Bind the method to the component context
this.renderChildren = this.renderChildren.bind(this)
}

renderChildren() {
// TODO: Change the name prop of all children
// to this.props.name
return this.props.children
}

render() {
return (
<div className="group">
{this.renderChildren()}
</div>
)
}
}
让我们开始遍历children获得每个child

renderChildren() {
return React.Children.map(this.props.children, child => {
// TODO: Change the name prop to this.props.name
return child
})
}
我们如何编辑它们的属性呢？

永恒地克隆元素
这是今天展示的最后一个辅助方法。顾名思义，React.cloneElement 会克隆一个元素。我们将想要克隆的元素当作第一个参数，然后将想要设置的属性以对象的方式作为第二个参数。

const cloned = React.cloneElement(element, {
new: 'yes!'
})
现在，clone 元素有了设置为 "yes!" 的属性 new

这正是我们的 RadioGroup 所需的。我们克隆所有的child并且设置name 属性

renderChildren() {
return React.Children.map(this.props.children, child => {
return React.cloneElement(child, {
name: this.props.name
})
})
}
最后一步就是传递一个唯一的 name 给RadioGroup

<RadioGroup name="g1">
<RadioButton value="first">First</RadioButton>
<RadioButton value="second">Second</RadioButton>
<RadioButton value="third">Third</RadioButton>
</RadioGroup>

没有手动添加 name 属性给所有的 RadioButton ，我们只是告诉了 RadioGroup 所需的name而已。

总结
Children使React组件更像是标记而不是脱节的实体。通过强大的JavaScript和一些React帮助函数使我们的生活更加简单。