React Native开发错误警告处理总结（持续更新） - 简书
React Native开发错误警告处理总结（持续更新）
注：本文是我在开发过程中遇到问题，之后会持续更新，希望帮助到更多的学习者。文中有不妥的地方希望指出共同学习，同时欢迎大神补充。（之后我会放出自己开发整理的笔记和demo）欢迎持续喜欢关注。
Paste_Image.png
估计是程序中有格式错误请自行检查比如：你注释出来问题。{/*title="张三"*/}换//title="张三"
Paste_Image.png
这个说明你要跳转的页面缺少子控件。所以你要在里面添加东西比如加个：&View&&/View&
警告3：调试警告
Paste_Image.png
看下报的警告就知道调试程序在这个窗口导致运行缓慢，所以建议你换一个新的窗口进行调试
Paste_Image.png
Paste_Image.png
&key&NSAppTransportSecurity&/key&
&key&NSAllowsArbitraryLoads&/key&
Paste_Image.png
这个很神奇。遇到了不要紧张多按 ?R几下或者把模拟器上的项目删除之后重新加载一般就会解决
Paste_Image.png
认真看下错误信息，上面说你忘记返回值了 所以你的函数中少了一个return（）；
如果你检查代码确实没有错误。还报这个错，那就说明你的端口被占用了。打开终端，切换到项目目录。执行react-native start如果出现Packager can't listen on port 8081那说明端口被占用了。：根据命令行提示进行操作：1.lsof -n -i4TCP:8081
列出被占用的端口列表2.kill -9 &PID&
找到与之对应的PID然后删除即可
SyntaxError: SyntaxError /Users/zhaopengsong/Desktop/ReactNative/BuyDemo/Component/Main/ZPMain.js: JSX value should be either an expression or a quoted JSX text (107:22)
Paste_Image.png
语法错误，JSX语法必须用{}对变量进行赋值：如title=titleName换为title={titleName}或者检查下有没有其他的语法错误，比如少了逗号多了分号这些低级错误
Requiring unknown module "undefined".If you are sure the module is there, try restarting the packager or running "npm install"
Paste_Image.png
这个错误我的解决思路是：之前改过什么，撤回，一般是用到了错误的react-native 方法导致的。
Paste_Image.png
原因：没有启动后台react-Native 服务。即终端
Paste_Image.png
如果你遇到了列如九宫格不自动换行的情况，检查一下样式里面有没有这两句话flex-start：交叉轴的起点对齐。``wrap：换行，第一行在上方。
Paste_Image.png
ExceptionsManager.js:63 Expected a component class, got [object Object]
Paste_Image.png
解决方法：You need to rename your commonViewclass to
CommonView, the class must be capitalize
NSURLErrorDomain
这是你请求的URL错误。要是https:// 的才行。
错误13：创建新项目，react-native init 项目名命令长时间无响应，或报错shasum check failed
react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
另，执行init时切记不要在前面加上sudo
错误14：修改8081默认端口号的两种方式
（1）启动项目时react-native start --port 8083（2）手动修改项目下的node_modules\react-native\local-cli\server\server.js下的方法server.js文件，如下图所示。
Paste_Image.png
Application NewsDemo has not been registered.
This is either due to a require() error during initialization
failure to call AppRegistry.registerComponent.
Paste_Image.png
错误原因是端口冲突。解决方法是看错误14其次解决方法是：
2、cd 到项目目录
3、react-native start
4、lsof -n -i4TCP:8081 //这句可以看打印出8081端口下的服务
5、kill -9 &PID&
//终止你其他占用端口
Paste_Image.png
如果你遇到了这个问题，并解决了。希望能在下面留言帮助更多的人。感谢！(我的错误原因是require路径出错，我是换用URI 加载image资源解决的)
错误出现执行react-native run-ios出现下面错误
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist
Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/ReactNativexx.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist
Paste_Image.png
1、尝试reset一下 模拟器之后再react-native run-ios
Paste_Image.png
2、尝试执行react-native upgrade
然后一路enter
再react-native run-ios试试？
Paste_Image.png
var View = React.V
/* later... */
propTypes: {
...View.propTypes,
myProp: PropTypes.string
错误19：(这个错误我的解决方法是新建项目，把组件放到新项目，重新安装第三方，然后run,虽然笨了点，但是问题解决了。)
啊。。。。。这个问题让我头痛死了[来看看GitHub上的讨论]哪位大神知道便捷的解决方案希望评论给出！感激！()
Paste_Image.png
尝试解决：1、react-native link ||rnpm link一下然后再安装react-native run-ios遇到：
Paste_Image.png
Application textDemo has not been registered. This is either due to a require() error during initialization or failure to call AppRegistry.registerComponent.
14C430A5-CA91--55318AB9AACF.png
解决方案：1、是注册的时候写错了。也就是这段话注册的不对：AppRegistry.registerComponent('textDemo', () =& textDemo);注意：‘textDemo’这个是项目名 textDemo这个你可以随自己你喜好指定。
2、很有可能是8081端口被占用了你可以尝试：切换到项目所在目录，输入react-native start如果出现Packager can't listen on port 8081那说明端口被占用了。根据命令行提示进行操作：1.lsof -n -i4TCP:8081
列出被占用的端口列表2.kill -9 &PID&
找到与之对应的PID然后删除即可3.重新运行项目 react-native run-ios/android
如果你项目中频繁遇到：'RCTRootView.h'file
not found.RCTBridgeModule.h file not found
Paste_Image.png
解决方法：1、添加link
：$(SRCROOT)/../node_modules/react-native/React
Paste_Image.png
2、到项目目录下sudo npm install试试。3、
#import "RCTBridgeModule.h"
#import &React/RCTBridgeModule.h&
安装的过程中可能会遇到UNMET PEER DEPENDENCY的错误
Paste_Image.png
解决办法就是在安装的时候 指定具体的版本安装：sudo npm install -g react@~15.4.1这个警告：npm WARN react-native@0.42.3 requires a peer of react@15.4.1 but none was installed.
Paste_Image.png
解决：npm install –save react@15.4.1
警告23?：屏蔽OS_ACTIVITY_MODE.log
react-native
运行应用xcode打印log__nw_connection_get_connected_socket_block_invoke Connection has no connected handler解决方法：
1. Xcode menu -& Product -& Edit Scheme...
2. Environment Variables -& Add -& Name: "OS_ACTIVITY_MODE", Value:"disable"
3. Run your app again, done! 这样就没问题了
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Unable to resolve module `react/lib/ReactComponentWithPureRenderMixin` from
`/Users/song/Desktop/ReactNativeRouterFlux/node_module
s/react-native-experimental-navigation/node_modules/react-addons-pure-render-mixin/index.js`:
Module does not exist in the module map or in these directories:
Paste_Image.png
Paste_Image.png
解决：类似这种错误，就是缺少模块，通过npm i react-addons-pure-render-mixin -S 命令即可，标记部分是你缺少的模块名。如果这样解决不了问题，那你需要降低的的RN版本。可能版本过新了。1、查看你的版本：react-native --version2、安装适当的版本：npm install --save react-native@0.42.33、更新一下模板：react-native upgrade
持续更新中！向往极致用户体验！iOS运动员！React 常见的面试题（在 React 里面，你可以知道也可以不知道的事, 但是你会发现他们确实很有用） - 推酷
React 常见的面试题（在 React 里面，你可以知道也可以不知道的事, 但是你会发现他们确实很有用）
根据记录，问这些问题可能不是深入了解他们在使用 React 方面的经验的最佳方式。
之所以标题是《 React 常见的面试题》，其实只是想起一个比《在 React 里面，你可以知道也可以不知道的事, 但是你会发现他们确实很有用》要简单明了的标题而已。
原文链接：
作者： Tyler.Google Developer Expert and a partner at React Training where we teach React online
翻译：Johann Lai
当你调用setState的时候，发生了什么事？
当调用 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态。这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。 为此，React将构建一个新的 React 元素树（您可以将其视为 UI 的对象表示）。
一旦有了这个树，为了弄清 UI 如何响应新的状态而改变，React 会将这个新树与上一个元素树相比较（ diff ）。
通过这样做， React 将会知道发生的确切变化，并且通过了解发生什么变化，只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间。
在 React 当中 Element 和 Component 有何区别？
简单地说，一个 React element 描述了你想在屏幕上看到什么。换个说法就是，一个 React element 是一些 UI 的对象表示。
一个 React Component 是一个函数或一个类，它可以接受输入并返回一个 React element t（通常是通过 JSX ，它被转化成一个 createElement 调用）。
有关更多信息，请查看
什么时候在功能组件( Class Component )上使用类组件( Functional Component )？
如果您的组件具有状态( state )或生命周期方法，请使用 Class 组件。否则，使用功能组件
什么是 React 的 refs ，为什么它们很重要？
refs就像是一个逃生舱口，允许您直接访问DOM元素或组件实例。为了使用它们，您可以向组件添加一个 ref 属性，该属性的值是一个回调函数，它将接收底层的 DOM 元素或组件的已挂接实例，作为其第一个参数。
class UnControlledForm extends Component {
handleSubmit = () =& {
console.log(&Input Value: &, this.input.value)
render () {
&form onSubmit={this.handleSubmit}&
type='text'
ref={(input) =& this.input = input} /&
&button type='submit'&Submit&/button&
以上注意到我们的输入字段有一个 ref 属性，其值是一个函数。该函数接收我们然后放在实例上的实际的 DOM 元素，以便在 handleSubmit 函数内部访问它。经常误解的是，您需要使用类组件才能使用 ref ，但 ref 也可以通过利用 JavaScript 中的 闭包 与 功能组件( functional components )一起使用。
function CustomForm ({handleSubmit}) {
let inputElement
&form onSubmit={() =& handleSubmit(inputElement.value)}&
type='text'
ref={(input) =& inputElement = input} /&
&button type='submit'&Submit&/button&
React 中的keys是什么，为什么它们很重要？
keys是什么帮助 React 跟踪哪些项目已更改、添加或从列表中删除。
{this.state.todoItems.map(({task, uid}) =& {
return &li key={uid}&{task}&/li&
每个 keys 在兄弟元素之间是独一无二的。我们已经谈过几次关于和解（reconciliation）的过程，而且这个和解过程（reconciliation）中的一部分正在执行一个新的元素树与最前一个的差异。 keys 使处理列表时更加高效，因为 React 可以使用子元素上的 keys 快速知道元素是新的还是在比较树时才被移动。
而且 keys 不仅使这个过程更有效率，而且没有 keys ，React 不知道哪个本地状态对应于移动中的哪个项目。所以当你 map 的时候，不要忽略了 keys 。
看下面的代码: 如果您在
下创建了一个 React 元素，
的组件定义将如何？
&Twitter username='tylermcginnis33'&
{(user) =& user === null
? &Loading /&
: &Badge info={user} /&}
&/Twitter&
import React, { Component, PropTypes } from 'react'
import fetchUser from 'twitter'
// fetchUser接收用户名返回 promise
// 当得到 用户的数据的时候 ，返回resolve 状态
class Twitter extends Component {
// 在这里写下你的代码
如果你不熟悉渲染回调模式（render callback pattern），这将看起来有点奇怪。在这种模式中，一个组件接收一个函数作为它的 child。注意上面包含在
标签内的内容。
Twitter 组件的 child 是一个函数，而不是你曾经习以为常的一个组件。 这意味着在实现
Twitter 组件时，我们需要将
props.children 作为一个函数来处理。
以下是我的答案。
import React, { Component, PropTypes } from 'react'
import fetchUser from 'twitter'
class Twitter extends Component {
user: null,
static propTypes = {
username: PropTypes.string.isRequired,
componentDidMount () {
fetchUser(this.props.username)
.then((user) =& this.setState({user}))
render () {
return this.props.children(this.state.user)
值得注意的是，正如我上面提到的，我通过调用它并传递给 user 来把 props.children 处理为为一个函数。
这种模式的好处是我们已经将我们的父组件与我们的子组件分离了。父组件管理状态，父组件的消费者可以决定以何种方式将从父级接收的参数应用于他们的 UI。
为了演示这一点，我们假设在另一个文件中，我们要渲染一个 Profile 而不是一个 Badge, ，因为我们使用渲染回调模式，所以我们可以轻松地交换 UI ，而不用改变我们对父（Twitter）组件的实现。
&Twitter username='tylermcginnis33'&
{(user) =& user === null
? &Loading /&
: &Profile info={user} /&}
&/Twitter&
受控组件( controlled component )与不受控制的组件( uncontrolled component )有什么区别？
React 的很大一部分是这样的想法，即组件负责控制和管理自己的状态。
当我们将 native HTML 表单元素（ input, select, textarea 等）投入到组合中时会发生什么？我们是否应该使用 React 作为“单一的真理来源”，就像我们习惯使用React一样？ 或者我们是否允许表单数据存在 DOM 中，就像我们习惯使用HTML表单元素一样？ 这两个问题是受控（controlled） VS 不受控制（uncontrolled）组件的核心。
受控组件是React控制的组件，也是表单数据的唯一真理来源。
如下所示， username 不存在于 DOM 中，而是以我们的组件状态存在。每当我们想要更新 username 时，我们就像以前一样调用setState。
class ControlledForm extends Component {
username: ''
updateUsername = (e) =& {
this.setState({
username: e.target.value,
handleSubmit = () =& {}
render () {
&form onSubmit={this.handleSubmit}&
type='text'
value={this.state.username}
onChange={this.updateUsername} /&
&button type='submit'&Submit&/button&
不受控制( uncontrolled component )的组件是您的表单数据由 DOM 处理，而不是您的 React 组件。
我们使用 refs 来完成这个。
class UnControlledForm extends Component {
handleSubmit = () =& {
console.log(&Input Value: &, this.input.value)
render () {
&form onSubmit={this.handleSubmit}&
type='text'
ref={(input) =& this.input = input} /&
&button type='submit'&Submit&/button&
虽然不受控制的组件通常更容易实现，因为您只需使用引用从DOM获取值，但是通常建议您通过不受控制的组件来支持受控组件。
主要原因是受控组件 支持即时字段验证 ，允许您有条件地禁用/启用按钮，强制输入格式，并且更多的是 『the React way』。
在哪个生命周期事件中你会发出 AJAX 请求，为什么？
AJAX 请求应该在 componentDidMount 生命周期事件中。 有几个原因:
Fiber，是下一次实施React的和解算法，将有能力根据需要启动和停止渲染，以获得性能优势。其中一个取舍之一是 componentWillMount ，而在其他的生命周期事件中出发 AJAX 请求，将是具有 “非确定性的”。 这意味着 React 可以在需要时感觉到不同的时间开始调用 componentWillMount。这显然是AJAX请求的不好的方式。
-您不能保证在组件挂载之前，AJAX请求将无法 resolve。如果这样做，那意味着你会尝试在一个未挂载的组件上设置 StState，这不仅不会起作用，反而会对你大喊大叫。 在 componentDidMount 中执行 AJAX 将保证至少有一个要更新的组件。
shouldComponentUpdate 应该做什么，为什么它很重要？
上面我们讨论了 reconciliation ，什么是 React 在 setState 被调用时所做的。在生命周期方法 shouldComponentUpdate 中，允许我们选择退出某些组件（和他们的子组件）的 reconciliation 过程。
我们为什么要这样做？
如上所述，“和解（ reconciliation ）的最终目标是以最有效的方式，根据新的状态更新用户界面”。如果我们知道我们的用户界面（UI）的某一部分不会改变，那么没有理由让 React 很麻烦地试图去弄清楚它是否应该渲染。通过从 shouldComponentUpdate 返回 false，React 将假定当前组件及其所有子组件将保持与当前组件相同。
您如何告诉React 构建（build）生产模式，该做什么？
通常，您将使用Webpack的 DefinePlugin 方法将 NODE_ENV 设置为 production。这将剥离像 propType 验证和额外的警告。除此之外，还有一个好主意，可以减少你的代码，因为React使用 Uglify 的 dead-code 来消除开发代码和注释，这将大大减少你的包的大小。
为什么要使用 React.Children.map（props.children，（）=&） 而不是 props.children.map（（）=&）
因为不能保证props.children将是一个数组。
以此代码为例，
&h1&Welcome.&/h1&
在父组件内部，如果我们尝试使用 props.children.map 映射孩子，则会抛出错误，因为 props.children 是一个对象，而不是一个数组。
如果有多个子元素，React 只会使props.children成为一个数组。就像下面这样：
&h1&Welcome.&/h1&
&h2&props.children will now be an array&/h2&
这就是为什么你喜欢 React.Children.map ，因为它的实现考虑到 props.children 可能是一个数组或一个对象。
描述事件在React中的处理方式。
为了解决跨浏览器兼容性问题，您的 React 中的事件处理程序将传递 SyntheticEvent 的实例，它是 React 的浏览器本机事件的跨浏览器包装器。
这些 SyntheticEvent 与您习惯的原生事件具有相同的接口，除了它们在所有浏览器中都兼容。有趣的是，React 实际上并没有将事件附加到子节点本身。React 将使用单个事件监听器监听顶层的所有事件。这对于性能是有好处的，这也意味着在更新DOM时，React 不需要担心跟踪事件监听器。
createElement 和 cloneElement 有什么区别？
createElement 是 JSX 被转载到的，是 React 用来创建 React Elements 的内容(一些 UI 的对象表示)cloneElement用于克隆元素并传递新的 props。他们钉住了这两个��的命名。
可以选择性地传递给 setState 的第二个参数是什么，它的目的是什么？
一个回调函数，当setState结束并 re-rendered 该组件时将被调用。一些没有说出来的东西是 setState 是 异步 的，这就是为什么它需要一个第二个回调函数。通常最好使用另一个生命周期方法，而不是依赖这个回调函数，但是很高兴知道它存在。
this.setState(
{ username: 'tylermcginnis33' },
() =& console.log('setState has finished and the component has re-rendered.')
这段代码有什么问题？
this.setState((prevState, props) =& {
streak: prevState.streak + props.count
没毛病。但是这种写法很少被使用，并不是众所周知的，就是你也可以传递一个函数给setState，它接收到先前的状态和道具并返回一个新的状态，正如我们在上面所做的那样。它不仅没有什么问题，而且如果您根据以前的状态（state）设置状态，推荐使用这种写法。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致ReactJs初学的几个易犯错误 - 简书
ReactJs初学的几个易犯错误
入门教程参照阮一峰的博文：
1、新建组件的时候，组件名称的第一个字母一定要大写，否则会报错。
var MyComponent=React.createClass({ this is my code });
2、组件渲染的时候，render（）内部代码段别用;号。这个是写JS代码保留下来的习惯。
ReactDOM.render(
&MyComponent/&,
document.getElementById('demo')
我自己常常在上面代码块的('demo')后面跟一个;号，然后找半天错误。
3、通过this.state获取组件属性状态的时候，总是省略this.state，直接把属性名称拿过来就用。
var Text=this.state.liked?'我喜欢':'我不喜欢';（正确）
var Text=liked?'我喜欢':'我不喜欢';（错误）
4、this.props与this.state的区别。
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props表示那些一旦定义，就不再改变的特性，而 this.state是会随着用户互动而产生变化的特性。
Web前端工作者，有持续不断学习的愿景。目前正在自学的技能包括：Web前端开发、吉他。