React学习——基础笔记

1、使用 JSX 的地方,都要加上 type="text/babel"
2、$ babel src --out-dir build将src下面的js文件转码到build下
3、ReactDOM.render将模板转为html,插入相应位置
4、JSX语法:html直接写在js里
5、React.createClass 生成组件
6、组件名首字母必须大写,组件类只能包含一个顶层标签,组件添加属性class要写成className,for要写成htmlFor,因为class和for是js保留字
7、this.props 对象属性和组件属性一一对应,除了this.props.children代表组件的所有子节点
ps:没有子节点this.props.children为undefined,一个子节点为对象,多个为数组
8、React.Children来处理 this.props.children,用React.Children.map遍历子节点就不用担心是0个、一个还是多个,是undefined还是对象。
9、propTypes是为了验证组件实例是否符合要求的属性;
【React学习——基础笔记】eg:React.PropTypes.string.isRequired,必须且字符串
10、getDefaultProps 设置默认属性
11、组件并不是真实的dom,而是虚拟dom,要获取真实的dom通过this.refs.[refname]获取真实组件然后再进行操作
12、getInitialState初始化状态,this.setState改变状态,状态发生改变时自动调用render渲染dom,this.state发生改变,this.props定以后不发生改变,所以表单的改变都是跟用户相关的互动,用this.state而不应该用this.props
13、组件生命周期:
Mounting:已插入真实 DOM
(1)componentWillMount()
(2)componentDidMount()
Updating:正在被重新渲染
(1)componentWillUpdate(object nextProps, object nextState)
(2)componentDidUpdate(object prevProps, object prevState)
Unmounting:已移出真实 DOM
(1)componentWillUnmount()
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
14、ajax请求应该在插入了真实的dom之后,这样请求成功后就可以通过this.setState渲染

    推荐阅读