大家好,我是洛竹?,一只住在杭城的木系前端?,如果你喜欢我的文章?,可以通过点赞帮我聚集灵力⭐️。 本文首发于 洛竹的官方网站,翻译自 sudheerj/reactjs-interview-questions,同步于公众号洛竹早茶馆,转载请联系作者。
React 已经具备了在 Nod e服务器上处理渲染的能力。有一个特殊版本的 DOM 渲染器,它与客户端的模式相同。
import ReactDOMServer from 'react-dom/server';
import App from './App';
ReactDOMServer.renderToString(<App />)。
这个方法将把常规的 HTML 输出为一个字符串,然后可以作为服务器响应的一部分放在页面主体内。在客户端,React 检测到预渲染的内容,并无缝地衔接该内容。
你应该使用 Webpack 的 DefinePlugin
方法来设置 NODE_ENV
为 production
,通过它来剥离诸如 propType 验证和额外警告的东西。除此之外,如果你对代码进行最小化处理,例如 Uglify 的无效代码消除法,剥离出只用于开发的代码和注释,这将极大地减少你的包的大小。
create-react-app
CLI 工具允许你快速创建和运行React应用程序,无需配置步骤。
让我们使用 CRA 创建 Todo 应用程序。
# 安装
$ npm install -g create-react-app
# 创建新项目
$ create-react-app todo-app
$ cd todo-app
# 构建、测试、运行
$ npm run build
$ npm run test
$ npm start
它包括我们建立一个 React 应用程序所需要的一切。
-webkit-
或其他前缀。当一个组件的实例被创建并插入到 DOM 中时,生命周期方法按以下顺序被调用。
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
以下生命周期方法将是不安全的编码做法,在异步渲染中会出现更多问题。
componentWillMount()
componentWillReceiveProps()
componentWillUpdate()
从 React v16.3 开始,这些方法被别名为 UNSAFE_
前缀,未加前缀的版本将在 React v17 中被移除。
getDerivedStateFromProps()
生命周期方法的目的是什么?新的静态的 getDerivedStateFromProps()
生命周期方法在一个组件实例化后以及重新渲染前被调用。它可以返回一个对象来更新状态,也可以返回 null
来表示新的 props 不需要任何状态更新。
class MyComponent extends React.Component {
static getDerivedStateFromProps(props, state) {
// ...
}
}
这个生命周期方法与 componentDidUpdate()
一起涵盖了 componentWillReceiveProps()
的所有用例。
getSnapshotBeforeUpdate()
生命周期方法的目的是什么?新的 getSnapshotBeforeUpdate()
生命周期方法会在 DOM 更新前被调用。这个方法的返回值将作为第三个参数传递给 componentDidUpdate()
。
class MyComponent extends React.Component {
getSnapshotBeforeUpdate(prevProps, prevState) {
// ...
}
}
这个生命周期方法与 componentDidUpdate()
一起涵盖了 componentWillUpdate()
的所有用例。
渲染 props 和高阶组件都只渲染一个 children,但在大多数情况下,Hooks 是一种更简单的方式,通过减少树中的嵌套来达到这个目的。
建议通过引用来命名组件,而不是使用 displayName
。
使用 displayName
来命名组件。
export default React.createClass({
displayName: 'TodoApp',
// ...
});
推荐的方法。
export default class TodoApp extends React.Component {
// ...
}
建议从安装到渲染阶段的方法的排序。
static
方法constructor()
getChildContext()
componentWillMount()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
componentDidUpdate()
componentWillUnmount()
onClickSubmit()
或 onChangeDescription()
getSelectReason()
或 getFooterContent()
renderNavigation()
或 renderProfilePicture()