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 (
);
}
你同时还可以使用 ES6 的 class 来定义组件：
class Welcome extends React.Component {
render() {
return Hello, {this.props.name}
;
}
}
// 注意： 组件名称必须以大写字母开头。React 会将以小写字母开头的组件
//视为原生 DOM 标签。例如， 代表 HTML 的 div 标签，而 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 = () => {
}
8: 条件渲染 与运算符 &&
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
Hello!
{unreadMessages.length > 0 &&
You have {unreadMessages.length} unread messages.
}
);
}
//之所以能这样做，是因为在 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
11：props和state的区别？
他们都是用来保存信息的，这些信息可以控制组件的渲染输出。重要的不同点是，props是传递给组件的，state是组件内被组件自己管理的。
12：class组件 和函数组件的区别
(定义组件 有两个要求：a：组件名称一定要以大写字母开头，b：组件的返回值只能有一个根元素)
A： 函数组件性能 比类组件性能高。因为类组件使用的时候要实例化，函数组件执行的时候直接返回结果