# 初识React你应该知道的一些点

# 组件

组件允许你将UI拆分为独立可复用的代码片段，每个片段进行独立构思。

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

• 函数组件

  function Welcome (props) {
  	return <h2>Hello, {props.name}</h2>;
  }
  

  @前端进阶之旅: 代码已经复制到剪贴板

• class组件

  class Welcome extends React.Component {
  	render () {
  		return <h2>Hello, {this.props.name}</h2>;
  	}
  }
  

  @前端进阶之旅: 代码已经复制到剪贴板

以上两个组件是等效的。

注意： 组件名称必须以大写字母开头。

React 会将以小写字母开头的组件视为原生 DOM 标签。例如，代表 HTML 的 div 标签，而 则代表一个组件，并且需在作用域内使用 Welcome。

# State

正确的使用setState()：

• 不要直接修改State：

  // 错误
  this.state.msg = 'LinDaiDai'
  
  // 正确
  this.setState({ msg: 'LinDaiDai' })
  

  @前端进阶之旅: 代码已经复制到剪贴板

• State的更新可能是异步的，如果更新的state中有依赖到state或者props则可以用函数：

  // 错误
  this.setState({
  	counter: this.state.counter + this.props.increment
  });
  
  // 正确
  this.setState((state, props) => ({
  	counter: state.counter + props.increment