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： 函数组件性能 比类组件性能高。因为类组件应用的时候要实例化，函数组件执行的时候间接返回后果