react.js初学者常见问题，老鸟也可能遇到?原文链接：
举个栗子：
class greeting extends React.Component {
如果您尝试渲染
，则React将忽略上述内容，您将收到警告：
Warning: The tag &greeting& is unrecognized in this browser.
If you meant to render a React component,
start its name with an uppercase letter.
还有一个更大的问题是当你命名你的组件为button或img时，React会忽略你的组件渲染一个原生的html button或img
注意上面没有呈现“My Awesome Button”，React只呈现了一个空的HTML按钮元素。 React在这种情况下不会提醒你。
用倒引号(`...`)创建的字符串与用单引号('...')创建的字符串不同。
在大多数键盘上，可以使用Tab键上方的键来输入倒引号(`)字符。
当我们需要在该字符串中包含动态表达式时，我们会使用倒引号创建一个字符串(不需要使用字符串连接)。
`这是一个字符串模板文字，可以包含表达式`
'这只是一个字符串，这里不能包含表达式'
假设你想要一个字符串，它显示当前时间: "Time is ..."
// 当前时间
const time = new Date().toLocaleTimeString();
// 当使用常规字符串(单引号或双引号)时，
// 您需要使用字符串连接:
'Time is ' + time
// 使用倒引号时,
// 您可以使用${}在字符串中插入时间
`Time is ${time}`
另外，当使用字符串文本（倒引号）时，您可以创建一个跨越多行的字符串：
const template = `I
Multiple Lines`;
这是不能使用普通字符串做到的
PropTypes对象已从React中删除。它以前可以作为React.PropTypes使用，但是现在你不能再使用它了。
现在需要这样使用：
1. 将新的prop-types包添加到您的项目中：npm install prop-types
2. 导入包：`import PropTypes from 'prop-types'`
然后你可以使用它。例如：PropTypes.string
如果你错误地使用了React.PropTypes，你会得到如下错误：TypeError: Cannot read property 'string' of undefined
当你看到一些教程或视频并跟着他们做DEMO时，请务必确保你正在使用的包或工具版本是正确的。通常，使用每种工具的最新版本是安全的选择，但如果教程有点老，则可能会遇到一些版本问题。
为了安全期间，推荐使用和教程一样的主版本，比如教程使用的是React.js 16那么就不推荐你使用React.js 15
对于Node.js这点很重要，如果使用老版本的Node.js你可能会面临重大问题。例如你跟着一些教程他们使用了Object.values你使用的Node.js 6.x，这个方法就并不存在那么就需要更新到Node.js 7.x
你能告诉我以下代码有什么问题吗?
class Numbers extends React.Component {
const arrayOfNumbers = _.range(1, 10);
上面的代码是无效的，因为在JavaScript类的主体内部，你不能自由地做任何事情。您只能使用有限的语法定义方法和属性。
这有点让人迷惑，因为类语法中使用的{}看起来像普通的块作用域，但事实并非如此。
在基于function组件中，您可以自由地做任何事情：
// 完全可以做任何事情
const Number = (props) =& {
const arrayOfNumbers = _.range(1, 10);
您可以使用字符串传递一个prop值：
&Greeting name="World" /&
如果需要传递数值，请不要使用字符串:
// 不要这样做
&Greeting counter="7" /&
相反，你需要使用大括号将你要传递的数值括起来
```javascript
&Greeting counter={7} /&
使用{7}在Greeting组件中，this.props.counter将会获得一个数值型的7对于数学运算是安全的。如果你把它当作"7"，然后把它当作一个数字运算，你可能会遇到意想不到的结果你懂的。
一些项目依赖于shell环境变量的存在来启动。如果您在不需要环境变量的情况下运行这些项目，它们将尝试为它们使用未定义的值，并可能会给您一些神秘的错误。
例如如果一个项目连接了MongoDB数据库，它可能会使用像process.env.MONGO_URI这样的环境变量来连接它。这使得项目可以在不同的环境中使用不同的MongoDB实例。
在本地运行连接到MongoDB的项目，你必须先导出一个MONGO_URI环境变量。例如，如果您有一个本地MongoDB在27017端口上运行，那么在运行该项目之前您需要执行此操作：
export MONGO_URI = "mongodb://localhost:27017/mydb"
你可以使用grep查看项目源代码找出它需要什么环境变量才能正常工作。
something();
something();
第一个将尝试返回一个对象，而第二个将正确调用something()并且返回该函数返回的内容
因为在JSX中任何
都将转换为函数调用，所以在返回任何JSX时，这个问题都是适用的
这个问题在箭头函数的短语法中也很常见
const Greeting = () =& {
Hello World
const Greeting = () =& (
Hello World
当您想要创建一个返回一个普通对象的短箭头函数时，上面的花括号和括号问题也会令人困惑
const myAction = () =& { type: 'DO_THIS' };
const myAction = () =& ({ type: 'DO_THIS'});
不将对象用括号括起来，myAction函数不会得到一个正确的普通对象。
这在setState方法的updater函数中很常见，因为它需要返回一个对象。如果要使用短箭头函数语法，则需要用圆括号包装该对象。
this.setState(prevState =& { answer: 42 });
this.setState(prevState =& ({ answer: 42 }));
它是React.Component不是React.component。它是componentDidMount不是ComponentDidMount。还有ReactDOM不是ReactDom
请注意您需要的API大小写。如果您使用不正确的大写字母，那么您将得到的错误可能无法清楚地说明问题所在。
当从react和react-dom导入时，确保导入正确的名称，使用的名称与导入的内容完全相同。ESLint可以帮助你指出不正确的地方。
访问组件props时，这个问题也很常见：
&Greeting userName="Max" /&
// 在组件内部，你需要这样
props.userName
如果不是props.userName，您错误地使用props.username或props.UserName，你会得到undefined值。需要注意这一点，或者更好的方法是，配置您的ESLint让他帮你处理这些问题。
在类组件中，您可以定义一个组件state对象，然后使用以下方法访问它:
class Greeting extends React.Component {
name: "World",
render() {
return `Hello ${this.state.name}`;
以上将输出“Hello World”
你也可以在定义state附近定义一个实例属性
class Greeting extends React.Component {
name: "World",
render() {
return `Hello ${this.user.name}`;
以上也会输出“Hello World”。
state属性是一个特殊的属性，因为React将管理它，你只能通过setState来改变它，而React会在你做这件事时做出对应的反应。但是，您定义的所有其他实例属性都不会影响渲染算法。您可以根据需要在上面的示例中更改this.user，React不会触发渲染周期
不要在结束标记中放错/字符。无可否认，有时您可以使用&tag /&和其他需要&/ tag&。
在HTML中，有一种叫做“自闭合标签”，这些是代表没有任何子节点的元素的标签。例如，img标签是一个自闭合标签：
&img src="..." /&
// 你不需要使用 &img&&/img&
一个div标签可以有子元素，所以你会使用开始和结束标签：
Children here...
这同样适用于React组件。如果组件具有子内容，则可能如下所示：
&Greeting&Hello!&/Greeting&
如果组件没有子元素，可以使用自闭合组件
// 下面两种方法都是有效的
&Greeting&&/Greeting&
&Greeting /&
下面使用是无效的
&Greeting&&Greeting /&
如果你放错了/字符，你会得到如下错误:
Syntax error: Unterminated JSX contents
我最后保存了这个，因为这是一个很大的问题，也是一个很常见的问题。
您可以在React组件中定义类方法，然后在组件的render方法中使用它们。例如：
class Greeting extends React.Component {
whoIsThis() {
console.dir(this); // "this"是whoIsThis的调用者
return "World";
render() {
return `Hello ${this.whoIsThis()}`;
ReactDOM.render(&Greeting /&, mountNode);
在render方法内部，我使用了this.whoIsThis方法调用了whoIsThis()方法，这个this关键字是指与表示组件的DOM元素相关联的组件实例，也就是Greeting组件
React内部会确保其类方法中的this引用到组件实例，但是当你使用whoIsThis方法的引用时，JavaScript不会自动绑定到组件实例。
console.dir这行中打印出的this会指向组件实例，因为我们是从render方法内部调用的。执行上面的代码时，您应该在控制台中看到Greeting对象：
但是，当您在延迟执行通道中使用相同的方法时，如事件处理程序，调用者将不再明确，并且console.dir行不指向组件实例。
请参阅下面的代码和输出(单击后)
在上面的代码中，当你点击字符串时，React调用whoIsThis方法，但它不会让你访问里面的组件实例。这就是为什么当我们点击字符串时你会得到undefined的原因。如果你的类方法需要访问像this.props和this.state这样的东西，这是一个问题。它根本无法工作。
对于这个问题，有许多解决方案。您可以将方法封装在内联函数中，或者使用.bind调用来强制方法记住它的调用者。对于不经常更新的组件，两者都可以。您还可以通过在类的构造函数中而不是在render方法中对绑定方法进行优化。但是，此方法的最佳解决方案是通过Babel启用ECMAScript class-fields段功能（仍然是第3阶段），并仅为处理程序使用箭头函数：
class Greeting extends React.Component {
whoIsThis = () =& {
console.dir(this);
render() {
&div onClick={this.whoIsThis}&
Hello World
将按预期工作：
目前就是这些了，感谢阅读。
相关热门文章分享查看: 2124|回复: 9
写给新手菜鸟看的有关油离配合
老鸟跳过即可
状态&&&[当前离线]
& && & 我们在平时聊天或是学车的时候经常听到这样的话& &收油加档&&降挡的时候轰一脚油门&&带着点刹车 。。。 这种话在老鸟眼里可能就是再基本不过的常识了& &但是在新手哪成了天书& & 收油&&收多少&&收到底嘛&&加油&&加多少&&油门到哪&&带着点刹车&&带多少&&这些新手到很难理解&&下面我们就来聊聊量化这些用语
& && &档位很好理解&&1--6档&&油门 刹车&&离合这些就没有段位了&&为了容易理解&&我们人为的给他们也分出段位来&&油门开度从小到大1--6度&&刹车从轻到重1--6度&&离合从原始状态到完全踩到底为1--6度& &摩托车同理
& && &比如 ㈠：4档升5档&&油门开度3度& && &那么首先加大油门到4度 等转速和时速都适合了（什么程度就适合升档了我前文说过了&&这里就不再重述了）& & 好&&现在开始升档& & 第一步： ①收油门从4度到2度&&②收紧离合到4度&&③加档到5档&&第一步的三个动作是同时的& &&&第二步：①松离合4-3-1&&②加大油门2-3-4&&第二步两个动作同时完成& & 两步1&&2&&升档时1同时完成第一步三个动作 2同时完成第二步两个动作&&1 2& &&&1&&2& &&&1&&2& & 1&&2 这样不开车的时候也可以练习&&手脚动作反复练习&&开车的时候 路上仔细体会以上动作& &㈡：4档降3档 油门开度3度& & 第一步①收油门3度到1度 ②离合收紧到4度 ③降挡到3档 ④刹车到4-5度降速& &第二步①松刹车&&②松离合4-3-1度 ③加大油门1-2-3度& & 第一步4个动作同时完成& &第二步3个动作同时完成& &练习方法升降档都一样&&反复联系 慢慢体会
状态&&&[当前离线]
这他妈就应该是驾校的事，哎，中国的驾校教摩托车简直就是走过场！
状态&&&[当前离线]
正准备买档车呢.....好复杂.
状态&&&[当前离线]
正准备买档车呢.....好复杂.
看起来复杂& &实际操作一气呵成&&挡车的乐趣也在于此&&你可以凭自己的喜好匹配档位和转速 感受不同的骑行感受&&习惯了都一样&&新手要一定的时间练习和感受&&建议从踏板上手&&感受一下速度和过弯角度&&可以用不同的速度顺利过弯之后&&再换挡车 着重感受加减档 离合之间的配合 排量一点点的加大&&直接上大排量&&很有可能控制不了&&随着车重和速度的增加&&操控的感受会超出你的预期
福喜两万公里了...大段路在快速路和主路..准备上YS250了.
压弯不会.拐弯从来都是30速度.&
状态&&&[当前离线]
还是找个空地自己慢慢去练习感觉来得快：）
状态&&&[当前离线]
还是找个空地自己慢慢去练习感觉来得快：）
不怕挨摔 有的是钱修车的话&&完全可以&&而且摔打出来经验记忆深刻&&哈哈哈
状态&&&[当前离线]
看起来复杂& &实际操作一气呵成&&挡车的乐趣也在于此&&你可以凭自己的喜好匹配档位和转速 感受不同的骑行 ...
福喜两万公里了...大段路在快速路和主路..准备上YS250了.
压弯不会.拐弯从来都是30速度.
状态&&&[当前离线]
福喜两万公里了...大段路在快速路和主路..准备上YS250了.
压弯不会.拐弯从来都是30速度.
俗话说的好& &淹死的都是会水的& &所谓艺高人胆大& &技术好了人就容易胆大妄为&&事故往往都是这么出来的& & 哈哈哈&&说笑而已啊&&还是要练好技术的&&他可以让我们避免掉好多不该发生的事情&&有了好的技术 再加上谨慎驾驶和丰富的行驶经验 才会让我们远离事故
两万公里无事故,就年初下雪摔车了,速度也在20以内.加上机服,基本上就屁股疼了半天.总结还是靠自己自觉,不闯灯,车流中不钻车,不路怒...
福喜的问题就是车速太慢,在车流中被超车太多太危险...所以想换250跟上车流..&
状态&&&[当前离线]
俗话说的好& &淹死的都是会水的& &所谓艺高人胆大& &技术好了人就容易胆大妄为&&事故往往都是这么出来的&&...
两万公里无事故,就年初下雪摔车了,速度也在20以内.加上机服,基本上就屁股疼了半天.总结还是靠自己自觉,不闯灯,车流中不钻车,不路怒...
福喜的问题就是车速太慢,在车流中被超车太多太危险...所以想换250跟上车流...
状态&&&[当前离线]
两万公里无事故,就年初下雪摔车了,速度也在20以内.加上机服,基本上就屁股疼了半天.总结还是靠自己自觉,不 ...
换了250控制住自己的麒麟臂&&哈哈哈&&祝快乐骑行
Powered by