react学习总结2--基础(二)
来源:互联网 发布:axure for mac 汉化 编辑:程序博客网 时间:2024/05/16 18:20
react 学习总结–基础(二)
说明
React 版本 :”15.4.1”
react-tap-event-plugin 版本: “^2.0.1”
1.数据流
在 React 中,数据流的流向是单向的–从父节点传递到子节点,因而组件是简单且易于把握的,他们只需从父节点获取props渲染即可
React 组件内部还具有自己的状态,这些状态只能在组件内修改,React组件本身很简单,可以把它看成是一个函数,他接受 props 和 state 作为参数,返回一个虚拟DOM表现
Props(属性)
props 就是 properties 的缩写,你可以使用它把任意类型的数据传递给组件。可以在挂在组件的时候设置它的props
let obj = {name : 'aaa', age : 20 }; <Child obj={obj} />
通过组件实例的setProps方法(很少这样做)来设置props
let obj = {name : 'aaa', age : 20}; let myChild = ReactDOM.render( <Child />, document.getElementById('app') ); myChild.setProps({name : 'bbb'});
注:在组件内,props只能由父组件传递进来,子组件内不能修改自己的 props ,即不能通过this.setProps,或者this.props直接修改props
props的格式,可以设置为字符串,
<a href="/home"></a>
也可以使用{},注入JavaScript传递任意类型的变量<a href={'/home/' + this.state.id}></a>
,添加事件处理<a onClick={this.handleClick}></a>
也可以使用展开语法<Child {...props} />
State(状态)
React 将组件看成一个状态机,有一个初始状态,然后随着与用户的互动,导致状态变化,从而触发重新渲染UI 每一个React组件都可以拥有自己的state,组件的state只存在于组件内部
state可以通过setState来修改,也可以通过getInitialState方法提供一组默认值,只要setState被调用,render方法就会被调用,如果render返回值有变化,虚拟DOM就会更新
注:不能使用
this.state.name = 'name'
这样的方式修改state,只能通过this.setState({name : 'name'})
这种方式修改
class Test extends Component { constructor(props) { super(props); this.state = { num : 0 }; } componentDidMount() { this.setState({num : 2}); } render() { return ( <Child childNum={this.state.num} /> ); }}
PropTypes(props验证)
组件的属性可以是任意值,但有时候我们需要验证别人使用组件的时候,提供的参数是否符合要求,PropsTypes属性,就是React提供的验证传入props的有效性的方式
当向props传入无效数据时,JavaScript控制台会抛出警告为了性能考虑,只在开发环境验证propsTypes
class Modal extends Component { static propTypes = { children: PropTypes.node, //表示这些 props 是可传可不传的 isOpen: PropTypes.bool.isRequired, //表示这些 props 不可以为空 } ... }
这里有更详细的验证器
2.事件处理
React 事件处理本质上跟JavaScript事件一样,命名上与JavaScript一致,并且会在相同的情景下触发,React标准化了事件对象,使用驼峰式命名
<input type="button" onClick={this.handleClick.bind(this)}>
,显式的调用bind(this)
,将函数上下文绑定到组件实例上。
事件捕获处理
一般写法
onClick={this.handleClick.bind(this)}
会在事件冒泡阶段触发,如果想在事件捕获阶段触发需要加上Capture
,例如onClickCapture={this.handleCaptureClick.bind(this)}
虚拟事件对象
React 的事件对象event是经过封装的,没有浏览器兼容问题,他有和浏览器本地事件相同的属性和方法
但是如果需要调用底层的浏览器事件对象,只需要使用nativeEvent
属性就可以获取,
常用的属性和方法如下
stopPropagation()
阻止事件冒泡preventDefault()
阻止默认事件target
触发事件的对象currentTarget
绑定事件的对象nativeEvent
原生浏览器事件对象type
事件类型
更多请见虚拟事件对象
触摸事件
旧版本的 React 为了使触摸事件生效,需要在渲染所有组件之前调用
React.initializeTouchEvents(true)
,
但是在新版本的 React 中已经停用,要使用触摸事件需要引入react-tap-event-plugin
,然后在渲染所有组件之前,调用injectTapEventPlugin();
为避免300ms之后再次触发onClick(也就是点击一次,反应两次)可以进行配置
injectTapEventPlugin({ shouldRejectClick: function (lastTouchEventTimestamp, clickEventTimestamp) { return true; } });
更多详情请看react-tap-event-plugin
3.复合组件
本质上,一个组件就是一个JavaScript函数,它接受props和state两个参数,并输出渲染好的HTML,组件一般被用于呈现和表达应用的某部分数据
我们可以通过创建多个组件来合成一个组件,即把组件的不同功能点进行分离
class ChildBtn extends Component{ constructor(props) { super(props); } render() { return <button>点击</button>; } } class ChildInput extends Component{ constructor(props) { super(props); } render() { return <input type="text" />; } } class Test extends Component { constructor(props) { super(props); } render() { return ( <div> <ChildInput /> <ChildBtn /> </div> ); } }
子级
<Parent><Child /></Parent>
如上,Child 就是 Parent 的子级,在Parent中能通过
this.props.children
读取子级
4.Mixin
mixin允许我们定义可以再多个组件中共用的方法,它们就是混合近组件中的对象而已,React的Mixin
能够防止静默函数覆盖,同时支持多个Mixin混合
React.createClass({ mixins : [{ getInitialState: function(){return {a : 1}} }], getInitialState: function(){return {b : 2}}});//最终结果:state => {a:1,b:2}
ES6 写法
如果要使用ES6编写React组件,不建议使用Mixins机制,将会使用高阶组件代替代Mixins,更多详情请看
高阶组件替代Mixins
5.DOM操作
多数情况下,React的虚拟DOM足以用来创建你想要的用户体验,但是有些情况下不得不操作底层的DOM,例如:使用第三方类库,或者执行一个React没有原生支持的操作,为了是这些操作变得容易,React提供了一个可以用于处理受其自身控制的DOM节点的方法,这些方法在组件生命周期的特定阶段才能被访问到
ref属性
ref属性,用来配合获取真实的DOM节点,下边是一个例子
class Test extends Component { constructor(props) { super(props); this.state = { value : '' } } handleClick(){ let textInput = ReactDOM.findDOMNode(this.refs.text); console.log(textInput); // 获取到真实DOM元素 } handleChange(e){ this.setState({value : e.target.value}); } render() { return ( <div> <input type="text" ref="text" value={this.state.value} onChange={this.handleChange.bind(this)} /> <button onClick={this.handleClick.bind(this)}>获取输入内容</button> </div> ); } }
访问到相应的DOM节点,需要通过
this.refs.[refName]
找到相应的子组件,定义ref,必须保障赋给每个子组件的ref值在所有的子组件中是唯一的,找到子组件后,通过ReactDOM.findDOMNode()
方法访问到底层的DOM节点注意:只有在组件被挂载后才能访问,在有些生命周期中可以访问到,但获取的DOM不是最新的,以下是其执行环境
- componentDidMount
- componentDidUpdate
- 事件处理函数中(事件处理函数都是在组件挂载后触发)
注:旧版本会用
this.refs.text.getDOMNode()
的方式获取,新版本中已经不能使用,替换为ReactDOM.findDOMNode(this.refs.text)
注:有其他方式能够实现功能时,尽量不要使用此功能,在性能上会有一定障碍,同时增加了组件的复杂性
6.表单
表单组件不同于其他组件,因为他们可以通过用户交互发生变化
表单组件支持几个受用户交互影响的属性
- value,用于
<input>
、<textarea>
组件。 - checked,用于类型为
checkbox
或者radio
的<input>
组件。 - selected,用于
<option>
组件。
无约束组件
即表单组件的值是不受React控制的,在React中,这种行为与设置
<input />
的 defaultValue一致
我们可以通过设置defaultValue属性设置默认值
class MyForm extends Component{ render() { return ( <input type="text" defaultValue="hello" /> ); } }
这个例子展示的就是无约束组件,组件的value并非由父组件设置,而是让
<input />
自己控制自己的值
约束组件
也就是表单组件的状态交由React组件控制,状态值被存储到React组件的state中
class MyForm extends Component{ constructor(props){ super(props); this.state = { value }; } handleChange(e){ this.setState({value : e.target.value}) } render() { return ( <input type="text" value={this.state.value} onChange={this.handleChange.bind(this)} /> ); } }
<input />
的值存储在父组件的state中
文本框和select
React 对
<textarea />
和<select/>
做了一些修改,提升了一致性
<textarea name="description" value="This is a description." />
<select value={this.state.value} onChange={this.handleChange.bind(this)}> <option value="A">fir</option> <option value="B">sec</option> <option value="C">thr</option> </select>
单选框和复选框
class Test extends Component{ constructor(props){ super(props); this.state = { checked : false }; } handleChange(e){ this.setState({checked : e.target.checked}) } render() { return ( <input type="checkbox" checked={this.state.checked} onChange={this.handleChange.bind(this)} /> ); } }
7.会用到的API
ReactDOM.unmountComponentAtNode
ReactDOM.unmountComponentAtNode(DOMElement containe)
销毁指定容器内的所有React节点。
ReactDOM.unmountComponentAtNode(document.getElementById('app'));
注:只能销毁
ReactDOM.render(<app />,document.getElementById('app'))
中的容器内部节点,通过react产生的节点使用此方法回报错:
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this.refs.remove));
warning.js:36 Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. Instead, have the parent component update its state and rerender in order to remove this component.
React.isValidElement
React.isValidElement(object)
判断一个对象是否是一个ReactElement(不是很常用)
let c = <Test />; console.log(React.isValidElement(c));//true
只有在判断的对象是实例化的react组件时,才会返回true
React.cloneElement()
React.cloneElement()
克隆并返回一个新的 ReactElement (内部子元素也会跟着克隆),新返回的元素会保留有旧元素的 props、ref、key。可以传入三个参数
1.要克隆的ReactElement;2.需要新添加的属性props;3.重新设置的子节点(会替换掉原本的子节点)
render() { let span = <span ref="span">aaa</span>; let spanChange = React.cloneElement(span, {name:'aaa'} ,<em>bbb</em>); return ( <div> {spanChange} </div> ); } //结果:<span name="aaa"><em>bbb</em><span>
React 遍历
React.Children.map()
可以实现遍历,但是我一般直接用map
render() { let arr = ['A','B','C','D']; return ( <div> <ul> { arr.map((item,i) => { return (<li key={i}>{item}</li>) }) } </ul> </div> ); }
注意:像这样循环添加react节点的操作一定要加上key属性,否则会有警告:
warning.js:36Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of
Test. See https://fb.me/react-warning-keys for more information.
forceUpdate
forceUpdate()
就是重新运行render,有些变量不在state上,但是又想达到变量更新,重新render的效果的时候,就可以使用此方法手动触发render
handleClick(){ this.forceUpdate(function () { console.log('update'); //render之后的回调 }); }
一些使用es6就不能使用的API
- replaceState
- isMounted
- Mixin
下一篇–React-Router传送门
- API,及常用方法
- react学习总结2--基础(二)
- React.js语法学习总结(二)
- react学习总结1--基础(一)
- 【React Native】React基础(二)
- React 学习 (二)
- React学习之坑(二)- 基础入门
- react学习总结6--构建工具Gulp、Browserify(二)
- java基础--学习总结(二)
- react学习札记(二)
- React 初步学习(二)
- React Native学习(二)
- React学习笔记(二)
- React 基础学习(1)
- React Native基础与入门(二)--初识React Native
- react基础(2)
- react项目学习笔记二(react-router)
- React Native 学习笔记(二)
- react学习之redux(二)
- Scala 偏函数和偏应用函数
- MySQL5.7更改密码时出现ERROR 1054 (42S22): Unknown column 'password' in 'field list'
- Android6.0动态权限申请步骤以及需要注意的一些坑
- Swift 循环
- 文章标题
- react学习总结2--基础(二)
- Android之给Button设置OnClick监听器
- Jsp常用内置对象
- 【easyui】tabs 不弹出重复窗口
- typedef的几种使用方法
- react学习总结3--React-Router
- ubantu使用——正确关机
- 设计模式之原型模式
- BeanFactory not initialized or already closed - call 'refresh' before accessing beans via the