作为最火的流行框架之一 react ,学习react十分必要,废话不多说,直接上学习心得~
1. 组件首字母必须大写, 所有组件必须有自己的render方法 用于输出组件,
2. 组件类智能包含一个顶层标签,否贼会报错,(顶层标签是并列才会报错, 如果是div里面写H1 不会报错);
3. class 属性需要写成 className ,for 属性需要写成 htmlFor
4. 对于this.props.children 来说 react提供了一个API React.Children.map 对他遍历
React.Children.map(this.props.children,function(child){})
5. 属性中设置ref 但是在读取值得时候要写refs
6. render中的单标签 记得要/ 不加会报错
7. getInitialState 方法用于定义初始状态,这个对象可以通过this.state属性读取 通过this.setState修改状态值
8.文本输入框的值,不能用 this.props.value 读取,而要定义一个 onChange 事件的回调函数,通过 event.target.value 读取用户输入的值
今天就先到这里,明天再继续学习:附上学习地址:
http://www.ruanyifeng.com/blog/2015/03/react.html
阮大神的博客~~。
0324学习心得
1.生命周期的3个状态:
Mounting 已插入真实DOM Updating: 正在重新渲染 Unmounting :已移出真是DOM
每个状态都有两个处理函数 Will函数进入状态之前,Did函数进入状态之后
componentWillMount() componentWillUpdate(object nextProps,object nextState) compoentWillUnmount()
componentDidMount() componentDidUpdate(object prevProps,object prevState)
还有两个特殊状态:
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps,object nextState):组件判断是否重新渲染时调用
prop 和 state 的区别:
prop是父组件传递给子组件的
state是子组件内部维护的数据,当状态变化时,组件也会进行更新,
0327学习心得
1.受控组件和非受控组件
两者的区别其实就是在于表单的值(value,checked,selected)能否被更改,如果不能更改就是非受控,能被更改就是受控。
因为:比如value, 在一开始设置的是value:123,已经给定了值,就无法再更改,这时,通过给对应的标签绑定onChange事件,通过event.target.value的真是DOM的值去改变虚拟DOM值。
2.循环插入子组件
每个元素都需要通过一个key 属性指定一个唯一值
组件标签内的子元素会通过父元素的props.children传递进来,如果是多个子元素,那props.children是数组 通过map(this.props.children,function(){}) 通过map遍历,不用担心props.children是什么数据类型