什么是 React 的 refs？为什么它们很重要
refs 允许你直接访问 DOM 元素或组件实例。为了使用它们，可以向组件添加个 ref 属性。如果该属性的值是一个回调函数，它将接受底层的 DOM 元素或组件的已挂载实例作为其第一个参数。可以在组件中存储它。
export class App extends Component { showResult() { console.log(this.input.value); } render() { return ( <div> <input type="text" ref={(input) => (this.input = input)} /> <button onClick={this.showResult.bind(this)}>展示结果</button> </div> ); }}
复制代码
如果该属性值是一个字符串， React 将会在组件实例化对象的 refs 属性中，存储一个同名属性，该属性是对这个 DOM 元素的引用。可以通过原生的 DOM API 操作它。
export class App extends Component { showResult() { console.log(this.refs.username.value); } render() { return ( <div> <input type="text" ref="username" /> <button onClick={this.showResu1t.bind(this)}>展示结果</button> </div> ); }}
复制代码
如何配置 React-Router 实现路由切换
（1）使用<Route> 组件
路由匹配是通过比较 <Route> 的 path 属性和当前地址的 pathname 来实现的。当一个 <Route> 匹配成功时，它将渲染其内容，当它不匹配时就会渲染 null。没有路径的 <Route> 将始终被匹配。
// when location = { pathname: '/about' }<Route path='/about' component={About}/> // renders <About/><Route path='/contact' component={Contact}/> // renders null<Route component={Always}/> // renders <Always/>
复制代码
（2）结合使用 <Switch> 组件和 <Route> 组件
<Switch> 用于将 <Route> 分组。
<Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /></Switch>
复制代码
<Switch> 不是分组 <Route> 所必须的，但他通常很有用。 一个 <Switch> 会遍历其所有的子 <Route>元素，并仅渲染与当前地址匹配的第一个元素。
（3）使用 <Link>、 <NavLink>、<Redirect> 组件
<Link> 组件来在你的应用程序中创建链接。无论你在何处渲染一个<Link> ，都会在应用程序的 HTML 中渲染锚（<a>）。
<Link to="/">Home</Link> // <a href='/'>Home</a>
复制代码
是一种特殊类型的 当它的 to 属性与当前地址匹配时，可以将其定义为"活跃的"。
// location = { pathname: '/react' }<NavLink to="/react" activeClassName="hurray"> React</NavLink>// <a href='/react' className='hurray'>React</a>
复制代码
当我们想强制导航时，可以渲染一个<Redirect>，当一个<Redirect>渲染时，它将使用它的 to 属性进行定向。
setState 之后 发生了什么？
（1）代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。
（2）经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面；
（3）在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染；
（4）在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。
setState 的调用会引起 React 的更新生命周期的 4 个函数执行。
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
虚拟 DOM 的引入与直接操作原生 DOM 相比，哪一个效率更高，为什么
虚拟 DOM 相对原生的 DOM 不一定是效率更高，如果只修改一个按钮的文案，那么虚拟 DOM 的操作无论如何都不可能比真实的 DOM 操作更快。在首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，虚拟 DOM 也会比 innerHTML 插入慢。它能保证性能下限，在真实 DOM 操作的时候进行针对性的优化时，还是更快的。所以要根据具体的场景进行探讨。
在整个 DOM 操作的演化过程中，其实主要矛盾并不在于性能，而在于开发者写得爽不爽，在于研发体验/研发效率。虚拟 DOM 不是别的，正是前端开发们为了追求更好的研发体验和研发效率而创造出来的高阶产物。虚拟 DOM 并不一定会带来更好的性能，React 官方也从来没有把虚拟 DOM 作为性能层面的卖点对外输出过。**虚拟 DOM 的优越之处在于，它能够在提供更爽、更高效的研发模式（也就是函数式的 UI 编程方式）的同时，仍然保持一个还不错的性能。
React-Router 4 的 Switch 有什么用？
Switch 通常被用来包裹 Route，用于渲染与路径匹配的第一个子 <Route> 或 <Redirect>，它里面不能放其他元素。
假如不加 <Switch> ：
import { Route } from 'react-router-dom'
<Route path="/" component={Home}></Route><Route path="/login" component={Login}></Route>
复制代码
Route 组件的 path 属性用于匹配路径，因为需要匹配 / 到 Home，匹配 /login 到 Login，所以需要两个 Route，但是不能这么写。这样写的话，当 URL 的 path 为 “/login” 时，<Route path="/" />和<Route path="/login" /> 都会被匹配，因此页面会展示 Home 和 Login 两个组件。这时就需要借助 <Switch> 来做到只显示一个匹配组件：
import { Switch, Route} from 'react-router-dom'
<Switch> <Route path="/" component={Home}></Route> <Route path="/login" component={Login}></Route></Switch>
复制代码
此时，再访问 “/login” 路径时，却只显示了 Home 组件。这是就用到了 exact 属性，它的作用就是精确匹配路径，经常与<Switch> 联合使用。只有当 URL 和该 <Route> 的 path 属性完全一致的情况下才能匹配上：
import { Switch, Route} from 'react-router-dom'
<Switch> <Route exact path="/" component={Home}></Route> <Route exact path="/login" component={Login}></Route></Switch>
复制代码
为什么 useState 要使用数组而不是对象
useState 的用法：
const [count, setCount] = useState(0)
复制代码
可以看到 useState 返回的是一个数组，那么为什么是返回数组而不是返回对象呢？
这里用到了解构赋值，所以先来看一下 ES6 的解构赋值：
数组的解构赋值
const foo = [1, 2, 3];const [one, two, three] = foo;console.log(one); // 1console.log(two); // 2console.log(three); // 3
复制代码
对象的解构赋值
const user = { id: 888, name: "xiaoxin"};const { id, name } = user;console.log(id); // 888console.log(name); // "xiaoxin"
复制代码
看完这两个例子，答案应该就出来了：
下面来看看如果 useState 返回对象的情况：
// 第一次使用const { state, setState } = useState(false);// 第二次使用const { state: counter, setState: setCounter } = useState(0)
复制代码
这里可以看到，返回对象的使用方式还是挺麻烦的，更何况实际项目中会使用的更频繁。 总结：useState 返回的是 array 而不是 object 的原因就是为了降低使用的复杂度，返回数组的话可以直接根据顺序解构，而返回对象的话要想使用多次就需要定义别名了。
参考 前端进阶面试题详细解答
fetch 封装
npm install whatwg-fetch --save // 适配其他浏览器npm install es6-promise
export const handleResponse = (response) => { if (response.status === 403 || response.status === 401) { const oauthurl = response.headers.get('locationUrl'); if (!_.isEmpty(oauthUrl)) { window.location.href = oauthurl; return; } } if (!response.ok) { return getErrorMessage(response).then(errorMessage => apiError(response.status, errorMessage)); } if (isJson(response)) { return response.json(); } if (isText(response)) { return response.text(); }
return response.blob();};
const httpRequest = { request: ({ method, headers, body, path, query, }) => { const options = {}; let url = path; if (method) { options.method = method; } if (headers) { options.headers = {...options.headers,...headers}; } if (body) { options.body = body; } if (query) { const params = Object.keys(query) .map(k => `${k}=${query[k]}`) .join('&'); url = url.concat(`?${params}`); } return fetch(url, Object.assign({}, options, { credentials: 'same-origin' })).then(handleResponse); },};
export default httpRequest;
复制代码
React 高阶组件是什么，和普通组件有什么区别，适用什么场景
官方解释∶
高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。
高阶组件（HOC）就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件，它只是一种组件的设计模式，这种设计模式是由 react 自身的组合性质必然产生的。我们将它们称为纯组件，因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件中的任何行为。
// hoc的定义function withSubscription(WrappedComponent, selectData) { return class extends React.Component { constructor(props) { super(props); this.state = { data: selectData(DataSource, props) }; } // 一些通用的逻辑处理 render() { // ... 并使用新数据渲染被包装的组件! return <WrappedComponent data={this.state.data} {...this.props} />; } };
// 使用const BlogPostWithSubscription = withSubscription(BlogPost, (DataSource, props) => DataSource.getBlogPost(props.id));
复制代码
1）HOC 的优缺点
2）适用场景
代码复用，逻辑抽象
渲染劫持
State 抽象和更改
Props 更改
3）具体应用例子
// HOC.jsfunction withAdminAuth(WrappedComponent) { return class extends React.Component { state = { isAdmin: false, } async UNSAFE_componentWillMount() { const currentRole = await getCurrentUserRole(); this.setState({ isAdmin: currentRole === 'Admin', }); } render() { if (this.state.isAdmin) { return <WrappedComponent {...this.props} />; } else { return (<div>您没有权限查看该页面，请联系管理员！</div>); } } };}
// pages/page-a.jsclass PageA extends React.Component { constructor(props) { super(props); // something here... } UNSAFE_componentWillMount() { // fetching data } render() { // render page with data }}export default withAdminAuth(PageA);
// pages/page-b.jsclass PageB extends React.Component { constructor(props) { super(props); // something here... } UNSAFE_componentWillMount() { // fetching data } render() { // render page with data }}export default withAdminAuth(PageB);
复制代码
class Home extends React.Component { render() { return (<h1>Hello World.</h1>); } } function withTiming(WrappedComponent) { return class extends WrappedComponent { constructor(props) { super(props); this.start = 0; this.end = 0; } UNSAFE_componentWillMount() { super.componentWillMount && super.componentWillMount(); this.start = Date.now(); } componentDidMount() { super.componentDidMount && super.componentDidMount(); this.end = Date.now(); console.log(`${WrappedComponent.name} 组件渲染时间为 ${this.end - this.start} ms`); } render() { return super.render(); } }; }
export default withTiming(Home);
复制代码
注意：withTiming 是利用 反向继承 实现的一个高阶组件，功能是计算被包裹组件（这里是 Home 组件）的渲染时间。
const withFetching = fetching => WrappedComponent => { return class extends React.Component { state = { data: [], } async UNSAFE_componentWillMount() { const data = await fetching(); this.setState({ data, }); } render() { return <WrappedComponent data={this.state.data} {...this.props} />; } }}
// pages/page-a.jsexport default withFetching(fetching('science-fiction'))(MovieList);// pages/page-b.jsexport default withFetching(fetching('action'))(MovieList);// pages/page-other.jsexport default withFetching(fetching('some-other-type'))(MovieList);
复制代码
hooks 父子传值
父传子在父组件中用useState声明数据 const [ data, setData ] = useState(false)
把数据传递给子组件<Child data={data} />
子组件接收export default function (props) { const { data } = props console.log(data)}子传父子传父可以通过事件方法传值，和父传子有点类似。在父组件中用useState声明数据 const [ data, setData ] = useState(false)
把更新数据的函数传递给子组件<Child setData={setData} />
子组件中触发函数更新数据，就会直接传递给父组件export default function (props) { const { setData } = props setData(true)}如果存在多个层级的数据传递，也可依照此方法依次传递
// 多层级用useContextconst User = () => { // 直接获取，不用回调 const { user, setUser } = useContext(UserContext); return <Avatar user={user} setUser={setUser} />;};
复制代码
React 中 keys 的作用是什么？
Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
在 React 中渲染集合时，向每个重复的元素添加关键字对于帮助 React 跟踪元素与数据之间的关联非常重要。key 应该是唯一 ID，最好是 UUID 或收集项中的其他唯一字符串：
<ul> {todos.map((todo) => <li key={todo.id}> {todo.text} </li> )};</ul>
复制代码
在集合中添加和删除项目时，不使用键或将索引用作键会导致奇怪的行为。
React 的状态提升是什么？使用场景有哪些？
React 的状态提升就是用户对子组件操作，子组件不改变自己的状态，通过自己的 props 把这个操作改变的数据传递给父组件，改变父组件的状态，从而改变受父组件控制的所有子组件的状态，这也是 React 单项数据流的特性决定的。官方的原话是：共享 state(状态) 是通过将其移动到需要它的组件的最接近的共同祖先组件来实现的。 这被称为“状态提升(Lifting State Up)”。
概括来说就是将多个组件需要共享的状态提升到它们最近的父组件上，在父组件上改变这个状态然后通过 props 分发给子组件。
一个简单的例子，父组件中有两个 input 子组件，如果想在第一个输入框输入数据，来改变第二个输入框的值，这就需要用到状态提升。
class Father extends React.Component { constructor(props) { super(props) this.state = { Value1: '', Value2: '' } } value1Change(aa) { this.setState({ Value1: aa }) } value2Change(bb) { this.setState({ Value2: bb }) } render() { return ( <div style={{ padding: "100px" }}> <Child1 value1={this.state.Value1} onvalue1Change={this.value1Change.bind(this)} /> <Child2 value2={this.state.Value1} /> </div> ) }}class Child1 extends React.Component { constructor(props) { super(props) } changeValue(e) { this.props.onvalue1Change(e.target.value) } render() { return ( <input value={this.props.Value1} onChange={this.changeValue.bind(this)} /> ) }}class Child2 extends React.Component { constructor(props) { super(props) } render() { return ( <input value={this.props.value2} /> ) }}
ReactDOM.render( <Father />, document.getElementById('root'))
复制代码
React 中的 setState 批量更新的过程是什么？
调用 setState 时，组件的 state 并不会立即改变， setState 只是把要修改的 state 放入一个队列， React 会优化真正的执行时机，并出于性能原因，会将 React 事件处理程序中的多次React 事件处理程序中的多次 setState 的状态修改合并成一次状态修改。 最终更新只产生一次组件及其子组件的重新渲染，这对于大型应用程序中的性能提升至关重要。
this.setState({ count: this.state.count + 1 ===> 入队，[count+1的任务]});this.setState({ count: this.state.count + 1 ===> 入队，[count+1的任务，count+1的任务]}); ↓ 合并 state，[count+1的任务] ↓ 执行 count+1的任务
复制代码
需要注意的是，只要同步代码还在执行，“攒起来”这个动作就不会停止。（注：这里之所以多次 +1 最终只有一次生效，是因为在同一个方法中多次 setState 的合并动作不是单纯地将更新累加。比如这里对于相同属性的设置，React 只会为其保留最后一次的更新）。
react 父子传值
父传子——在调用子组件上绑定，子组件中获取 this.props
子传父——引用子组件的时候传过去一个方法，子组件通过 this.props.methed()传过去参数
connection
react router
import React from 'react'import { render } from 'react-dom'import { browserHistory, Router, Route, IndexRoute } from 'react-router'
import App from '../components/App'import Home from '../components/Home'import About from '../components/About'import Features from '../components/Features'
render( <Router history={browserHistory}> // history 路由 <Route path='/' component={App}> <IndexRoute component={Home} /> <Route path='about' component={About} /> <Route path='features' component={Features} /> </Route> </Router>, document.getElementById('app'))render( <Router history={browserHistory} routes={routes} />, document.getElementById('app'))
复制代码
React Router 提供一个 routerWillLeave 生命周期钩子，这使得 React 组件可以拦截正在发生的跳转，或在离开 route 前提示用户。routerWillLeave 返回值有以下两种：
return false 取消此次跳转
return 返回提示信息，在离开 route 前提示用户进行确认。
React-Router 的路由有几种模式？
React-Router 支持使用 hash（对应 HashRouter）和 browser（对应 BrowserRouter） 两种路由规则， react-router-dom 提供了 BrowserRouter 和 HashRouter 两个组件来实现应用的 UI 和 URL 同步：
（1）BrowserRouter
它使用 HTML5 提供的 history API（pushState、replaceState 和 popstate 事件）来保持 UI 和 URL 的同步。由此可以看出，BrowserRouter 是使用 HTML 5 的 history API 来控制路由跳转的：
<BrowserRouter basename={string} forceRefresh={bool} getUserConfirmation={func} keyLength={number}/>
复制代码
其中的属性如下：
<BrowserRouter basename="/calendar"> <Link to="/today" /></BrowserRouter>
复制代码
等同于
<a href="/calendar/today" />
复制代码
// 这是默认的确认函数const getConfirmation = (message, callback) => { const allowTransition = window.confirm(message); callback(allowTransition);}<BrowserRouter getUserConfirmation={getConfirmation} />
复制代码
需要配合<Prompt> 一起使用。
（2）HashRouter
使用 URL 的 hash 部分（即 window.location.hash）来保持 UI 和 URL 的同步。由此可以看出，HashRouter 是通过 URL 的 hash 属性来控制路由跳转的：
<HashRouter basename={string} getUserConfirmation={func} hashType={string} />
复制代码
其参数如下：
basename, getUserConfirmation 和 BrowserRouter 功能一样；
hashType window.location.hash 使用的 hash 类型，有如下几种：
slash - 后面跟一个斜杠，例如 #/ 和 #/sunshine/lollipops；
noslash - 后面没有斜杠，例如 # 和 #sunshine/lollipops；
hashbang - Google 风格的 ajax crawlable，例如 #!/ 和 #!/sunshine/lollipops。
在 React 中页面重新加载时怎样保留数据？
这个问题就设计到了数据持久化， 主要的实现方式有以下几种：
Redux： 将页面的数据存储在 redux 中，在重新加载页面时，获取 Redux 中的数据；
data.js： 使用 webpack 构建的项目，可以建一个文件，data.js，将数据保存 data.js 中，跳转页面后获取；
sessionStorge： 在进入选择地址页面之前，componentWillUnMount 的时候，将数据存储到 sessionStorage 中，每次进入页面判断 sessionStorage 中有没有存储的那个值，有，则读取渲染数据；没有，则说明数据是初始化的状态。返回或进入除了选择地址以外的页面，清掉存储的 sessionStorage，保证下次进入是初始化的数据
history API： History API 的 pushState 函数可以给历史记录关联一个任意的可序列化 state，所以可以在路由 push 的时候将当前页面的一些信息存到 state 中，下次返回到这个页面的时候就能从 state 里面取出离开前的数据重新渲染。react-router 直接可以支持。这个方法适合一些需要临时存储的场景。
React.forwardRef 是什么？它有什么作用？
React.forwardRef 会创建一个 React 组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特别有用：
转发 refs 到 DOM 组件
在高阶组件中转发 refs
React 组件命名推荐的方式是哪个？
通过引用而不是使用来命名组件 displayName。
使用 displayName 命名组件：
export default React.createClass({ displayName: 'TodoApp', // ...})
复制代码
React 推荐的方法：
export default class TodoApp extends React.Component { // ...}
复制代码
什么是 Props
Props 是 React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据。
setState 是同步异步？为什么？实现原理？
1. setState 是同步执行的
setState 是同步执行的，但是 state 并不一定会同步更新
2. setState 在 React 生命周期和合成事件中批量覆盖执行
在 React 的生命周期钩子和合成事件中，多次执行 setState，会批量执行
具体表现为，多次同步执行的 setState，会进行合并，类似于 Object.assign，相同的 key，后面的会覆盖前面的
当遇到多个 setState 调用时候，会提取单次传递 setState 的对象，把他们合并在一起形成一个新的
单一对象，并用这个单一的对象去做 setState 的事情，就像 Object.assign 的对象合并，后一个
key 值会覆盖前面的 key 值
经过 React 处理的事件是不会同步更新 this.state 的. 通过 addEventListener || setTimeout/setInterval 的方式处理的则会同步更新。
为了合并 setState，我们需要一个队列来保存每次 setState 的数据，然后在一段时间后执行合并操作和更新 state，并清空这个队列，然后渲染组件。
评论