React When writing, you might write code like this:
React from Import 'REACT'
function A () {
// ... OTHER code
return <h1 of> distal Taoyuan </ h1 of>
}
copy the code
You certainly wondered, did not use the code above React, React Why introduce it?
If you import React from 'react' deleted, this error will be reported the following:
So where exactly is this React used, leading to the introduction React we will complain it, do not understand this reason, it is JSX do not quite understand.
You can say the above code (ignore the import statements) into Online babel in transformation and found babel will be converted to the code above:
A function () {
// ... OTHER code
return React.createElement ( "h1 of", null, "distal Taoyuan");
}
copy the code
Because in essence, JSX just for React.createElement (component, props, ... children) syntactic sugar functions provided.
Why use className instead of class
React idea of a beginning rather than trying to keep up with the HTML DOM API browser, because the JSX is JS extension, rather than to replace HTML, this will create elements and closer. Set on the element class className need to use this API:
const element = document.createElement("div")
element.className = "hello"
复制代码
Browser issues before ES5, you can not use reserved words in an object. The following code will throw an error in IE8:
Element {= const
Attributes: {
class: "Hello"
}
}
copy the code
Deconstruction problem, when you deconstruct the property, if you assign a class variable will be problems:
const { class } = { class: 'foo' } // Uncaught SyntaxError: Unexpected token }
const { className } = { className: 'foo' }
const { class: className } = { class: 'foo' }
复制代码
Other discussions visible: an interesting topic, why jsx use className instead of class
Why use a small hump property
Because the closer JavaScript instead of HTML syntax JSX, so React DOM using camelCase (small hump named) to define the name of the property, without naming convention HTML attribute names.
Introduction from the JSX
Why should invoke super constructor in and transfer props
This is a piece of code official website, specifically see: state (State) and life cycle
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
复制代码
And there are so many words, not only for us but also to call the super props passed in, but did not tell us why.
I do not know you ever wondered why call super and transfer props, then we come to solve the puzzle of it.
Why should we call super
In fact, this is not a limitation React, which is the JavaScript restrictions in the constructor if you want to call this, it is necessary to call in advance super, in React, we often initialized state, this.state = xxx in the constructor, so You need to call the super.
Why pass props
You might think that you must pass props to super, React.Component otherwise would not be able to initialize this.props:
class Component {
constructor(props) {
this.props = props;
// ...
}
}
复制代码
不过，如果你不小心漏传了 props，直接调用了 super()，你仍然可以在 render 和其他方法中访问 this.props（不信的话可以试试嘛）。
为啥这样也行？因为React 会在构造函数被调用之后，会把 props 赋值给刚刚创建的实例对象：
const instance = new YourComponent(props); instance.props = props; 复制代码
props 不传也能用，是有原因的。
但这意味着你在使用 React 时，可以用 super() 代替 super(props) 了么？
那还是不行的，不然官网也不会建议你调用 props 了，虽然 React 会在构造函数运行之后，为 this.props 赋值，但在 super() 调用之后与构造函数结束之前， this.props 仍然是没法用的。
// Inside React
class Component {
constructor(props) {
this.props = props;
// ...
}
}
// Inside your code
class Button extends React.Component {
constructor(props) {
super(); // 忘了传入 props
console.log(props); // ✅ {}
console.log(this.props); // undefined
}
// ...
}
复制代码
要是构造函数中调用了某个访问 props 的方法，那这个 bug 就更难定位了。因此我强烈建议始终使用super(props)，即使这不是必须的：
class Button extends React.Component {
constructor(props) {
super(props); // ✅ We passed props
console.log(props); // ✅ {}
console.log(this.props); // ✅ {}
}
// ...
}
复制代码
上面的代码确保 this.props 始终是有值的。
如果你想避免以上的问题，你可以通过class 属性提案 来简化代码：
class Clock extends React.Component {
state = {date: new Date()};
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
复制代码
更详细的内容可见Dan 的博客
为什么组件用大写开头
前面以及说过了，JSX 是 React.createElement(component, props, …children) 提供的语法糖，component 的类型是：string/ReactClass type，我们具体看一下在什么情况下会用到 string 类型，什么情况下用到 ReactClass type 类型
string 类型react会觉得他是一个原生dom节点
ReactClass type 类型 自定义组件
例如（string）：在 jsx 中我们写一个
<div></div> 复制代码
转换为js的时候就变成了
React.createElement("div", null)
复制代码
例如（ReactClass type）：在jsx中我们写一个
myDiv function () {
return (<div> <div>)
}
<myDiv> </ myDiv>
copy the code
Js converted when he became
function MyDiv() {
return React.createElement("div", null);
}
React.createElement(MyDiv, null);
复制代码
The above example, if the first letter lowercase MyDiv, as follows
myDiv function () {
return (<div> <div>)
}
<myDiv> </ myDiv>
copy the code
Js converted when he became
function myDiv() {
return React.createElement("div", null);
}
React.createElement("myDiv", null);
复制代码
Unable to find the myDiv the dom, so there will be an error.
postscript
This is the first article of this series, these questions also in one of my "React exchange group" where we make some of their time just learning to react easily confused to the point, the next nothing else is confused answers to the following points If there are other issues you want to know, are welcome in the comments area.