共计 3170 个字符，预计需要花费 8 分钟才能阅读完成。
1：在 React 中有一个命名标准，通常会将代表事件的监听 prop 命名为 on[Event] 将处理事件的监听办法命名为 handle[Event] 这样的格局
2：React DOM 应用 camelCase 小驼峰命名来定义属性的名称，例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。
3：React Dom 会将元素和他的子元素与他们之前的状态进行比拟，只更新他须要更新的局部。React DOM 只会更新理论扭转了的内容。
4：函数组件：function Square(props) {
return (<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}
你同时还能够应用 ES6 的 class 来定义组件：class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;
}
}
// 留神：组件名称必须以大写字母结尾。React 会将以小写字母结尾的组件
// 视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Square />
// 则代表一个组件，并且需在作用域内应用 Square。5: Props 的只读性 所有 React 组件都必须像纯函数一样爱护它们的 props 不被更改。
6: State 的更新可能是异步的
出于性能思考，react 可能会把多个 setState() 调用合并成一个调用。
因为 this.props 和 this.state 可能会异步更新，所以不要依赖他们的值来更新下一个状态。
例如，此代码可能会无奈更新计数器：
this.setState({counter: this.state.counter + this.props.increment,});要解决这个问题 能够让 setState 接管一个函数而不是对象
this.setState((state, props) => ({counter: state.counter + props.increment}));7：事件处理
// 此语法确保 `handleClick` 内的 `this` 已被绑定。// 留神: 这是 * 实验性 * 语法。handleClick = () => {}
<button onClick={this.handleClick}>
Click me
</button>8: 条件渲染 与运算符 &&
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
// 之所以能这样做，是因为在 JavaScript 中，true && expression
// 总是会返回 expression, 而 false && expression 总是会返回 false。// 因而，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会疏忽并跳过它。另一种条件渲染是应用三目运算符 condition ? true : false。
阻止组件渲染，返回 null
9: 列表和 Key
Key 帮忙 react 辨认哪些元素扭转了，比方被增加或删除，因而你该当给数组中每一个元素赋予一个确定的标识。通常咱们应用数组中的 id 作为 key，当没有 id 时，能够应用数组的索引 index 作为 Key。如果列表我的项目的程序可能会扭转，不倡议应用索引 index 作为 key
key 只是在兄弟节点之间必须惟一
10：状态晋升
一个组件不能间接拜访另一个组件的 state，一个组件内的 state 只能由这个组件的 setState()来扭转，包含子组件应用 props 也不能间接批改，因为 props 是只读的。然而 子组件能够调用父组件的办法来更改父组件的 state
(1) 什么时候应用状态晋升？
两个组件须要共享数据，一起来实现某一项操作。这个时候就会用到 状态晋升。咱们能够把这些共享的数据 放到他们独特的父组件中去。这两个组件就都能应用 这一数据了。这一思维就是 状态晋升。
(2) 应用：实时进制转换。输出 克 数量，立马就将转换好的千克输入，反之亦然。
// 父组件
class Father extends React.Component {constructor(props) {super(props);
this.handleWeightChange = this.handleWeightChange.bind(this);
this.handleWeightChange2 = this.handleWeightChange2.bind(this);
this.onDec = this.onDec.bind(this);
this.onHec = this.onHec.bind(this);
this.state = {
scale: 'g',
nums: ""
}
}
handleWeightChange(value) {
this.setState({
scale: "kg",
nums: value
})
}
handleWeightChange2(value) {
this.setState({
scale: "g",
nums: value
})
}
onDec(nums) {return nums * 1000}
onHec(nums) {return nums / 1000}
render() {
const nums = this.state.nums;
const scale = this.state.scale;
const dec = scale == "g" ? this.onDec(nums) : nums; // 判断分量为 g，并进行转换
const hec = scale == "kg" ? this.onHec(nums) : nums;
return <div>
<NumberInput onWeightChange={this.handleWeightChange} value={dec} scale="g" />
<NumberInput onWeightChange={this.handleWeightChange2} value={hec} scale="kg" />
</div>
}
}
// 子组件
class NumberInput extends React.Component {constructor(props) {super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {this.props.onWeightChange(e.target.value);
}
render() {
const value = this.props.value
const scaleLabel = this.props.scale == "g" ? "克" : "千克";
return <div>
<label>{scaleLabel} : </label>
<input type="text" onChange={this.handleChange} value={value} />
</div>
}
}11：props 和 state 的区别？
他们都是用来保存信息的，这些信息能够管制组件的渲染输入。重要的不同点是，props 是传递给组件的，state 是组件内被组件本人治理的。
12：class 组件 和函数组件的区别
(定义组件 有两个要求：a：组件名称肯定要以大写字母结尾，b：组件的返回值只能有一个根元素)
A：函数组件性能 比类组件性能高。因为类组件应用的时候要实例化，函数组件执行的时候间接返回后果
