react入门

想对react下手已经不是一天两天的事儿了，今日便将心一横…

react的两个核心方法

// 渲染方法
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
// 定义组件类（ES6的写法）
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

JSX语法

JSX语法支持html与js混着写。遇见<解析为html，遇见{解析为javascript。
注：

如果{}里面放了javascript数组，JSX会将该数组展开渲染。
给标签设置动态属性值，只需要将属性值用{}包起来。
在JSX里面class要变为className。

组件类

组件类的render方法

// render方法里面返回一些标签
render() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

组件类的`props`

react里面的props是只读的，由父组件传给子组件。子组件通过this.props.xx来得到props。
初始化默认的props：

1 2	// 这个写在组件类的外面组件类名.defaultProps = { initialCount: 0 };

组件类的`state`

修改state要用this.setState({comment: 'Hello'});（这种方式会自动触发视图渲染）。

组件类的构造函数

// 构造函数可以用来初始化props的值
constructor(props) {
  super(props); // 调一次父类的构造函数
  this.state = {date: new Date()};
}

组件的生命周期

三种状态Mount、Update、Unmount。
两种特殊状态的处理函数componentWillReceiveProps(object nextProps)（已加载组件收到新的参数时调用）；shouldComponentUpdate(object nextProps, object nextState)（组件判断是否重新渲染时调用）。

事件处理

在ES6写法的组件类中，方法的绑定需要用bind()方法绑定this。
给事件处理函数传递额外参数的方式：bind(this, arg1, arg2, ...)。
使用原生事件的时候注意在componentWillUnmount解除绑定 removeEventListener。

渲染列表

善用数组的`map()`方法

const numbers = [1, 2, 3, 4, 5];
// map()的第二个参数可以用来作为key的属性值
const listItems = numbers.map((number,index) =>
  <li>{number}</li>
);

列表中的`key`属性

如果循环列表时没有给列表的每一项添加key属性，react会有警告。加上key属性有利于提高react的性能。
注：key并不要求在全局独一无二。

表单

获取输入框、文本域、下拉选项中的值

1
2
3

handleChange(event) {
  this.setState({value: event.target.value});
}

表单默认值

使用defaultValue和defaultChecked代替value和checked。

处理多个表单元素

handleInputChange(event) {
  const target = event.target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  // 这里的name就是每个表单元素的name属性
  const name = target.name;

  this.setState({
    [name]: value
  });
  // 等价与这种写法
  var partialState = {};
  partialState[name] = value;
  this.setState(partialState);
}