React入门学习笔记
来源:互联网 发布:全站仪传输软件使用 编辑:程序博客网 时间:2024/06/05 08:37
一、HTML模板
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> // ** Our code goes here! ** </script> </body></html>
注意
①最后一个<script>
标签的type属性为text/babel
。这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type=”text/babel” 。
②使用的三个库react.js
、react-dom.js
和Browser.js
必须首先加载。
react.js
是 React 的核心库
react-dom.js
是提供与 DOM 相关的功能
Browser.js
的作用是将 JSX 语法转为 JavaScript 语法
二、ReactDOM.render()
ReactDOM.render是React的最基本方法,用于模板转换为HTML语言,并插入指定的DOM节点。
实例
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body></html>
将一个h1
标题插入example
节点
三、JSX语法
HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写。
实例
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var names = ['Alice', 'Emily', 'Kate']; ReactDOM.render( <div> { names.map(function (name, index) { return <div key={index}>Hello, {name}!</div> }) } </div>, document.getElementById('example') ); </script> </body></html>
JSX语法规则:遇到 HTML 标签(以 <
开头),就用 HTML 规则解析;遇到代码块(以 {
开头),就用 JavaScript 规则解析。
JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员。
实例
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var arr = [ <h1 key="1">Hello world!</h1>, <h2 key="2">React is awesome</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') ); </script> </body></html>
arr
变量是一个数组,结果 JSX 会把它的所有成员,添加到模板
四、组件
React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。
实例
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="John" />, document.getElementById('example') ); </script> </body></html>
变量 HelloMessage
就是一个组件类。模板插入 <HelloMessage />
时,会自动生成 HelloMessage
的一个实例。所有组件类都必须有自己的 render 方法,用于输出组件。
注意
组件类的第一个字母必须大写,否则会报错,比如HelloMessage
不能写成helloMessage
。另外,组件类只能包含一个顶层标签,否则也会报错。
组件的用法与原生的 HTML 标签完全一致,可以任意加入属性,比如 <HelloMessage name="John">
,就是 HelloMessage
组件加入一个 name
属性,值为 John
。组件的属性可以在组件类的 this.props
对象上获取,比如 name
属性就可以通过 this.props.name
读取。
五、this.props.children
this.props
对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children
属性,它表示组件的所有子节点。
实例
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var NotesList = React.createClass({ render: function() { return ( <ol> { React.Children.map(this.props.children, function (child) { return <li>{child}</li>; }) } </ol> ); } }); ReactDOM.render( <NotesList> <span>hello</span> <span>world</span> </NotesList>, document.getElementById('example') ); </script> </body></html>
NoteList
组件有两个 span
子节点,它们都可以通过 this.props.children
读取
注意
this.props.children 的值有三种可能:如果当前组件没有子节点,它就是 undefined ;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array 。
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object。
六、PropTypes
组件的属性可以接受任意值,字符串、对象、函数等等都可以。组件类的PropTypes属性,用来验证组件实例的属性是否符合要求。
实例
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var data = 123; var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isRequired, }, render: function() { return <h1> {this.props.title} </h1>; } }); ReactDOM.render( <MyTitle title={data} />, document.getElementById('example') ); </script> </body></html>
Mytitle
组件有一个title
属性。PropTypes
告诉 React
,这个 title
属性是必须的,而且它的值必须是字符串。现在,我们设置 title 属性的值是一个数值,通不过验证,控制台会显示一行错误信息。
getDefaultProps
方法可以用来设置组件属性的默认值。
实例
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var data = "123"; var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isRequired, }, getDefaultProps: function(){ return { name: 'Jhon' }; }, render: function() { return ( <div> <h1> {this.props.title} </h1> <h2>{this.props.name}</h2> </div> ); } }); ReactDOM.render( <MyTitle title={data} />, document.getElementById('example') ); </script> </body></html>
七、获取真实的DOM节点
组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。
根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。但是,有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性。
实例
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel">var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); }, render: function() { return ( <div> <input type="text" ref="myTextInput" /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); }});ReactDOM.render( <MyComponent />, document.getElementById('example')); </script> </body></html>
组件 MyComponent
的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。为了做到这一点,文本输入框必须有一个 ref
属性,然后 this.refs.[refName]
就会返回这个真实的 DOM 节点。
需要注意的是,由于 this.refs.[refName]
属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定 Click 事件的回调函数,确保了只有等到真实 DOM 发生 Click 事件之后,才会读取 this.refs.[refName] 属性。
八、this.state
组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI 。
实例
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var LikeButton = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: function(event) { this.setState({liked: !this.state.liked}); }, render: function() { var text = this.state.liked ? 'like' : 'haven\'t liked'; return ( <p onClick={this.handleClick}> You {text} this. Click to toggle. </p> ); } }); ReactDOM.render( <LikeButton />, document.getElementById('example') ); </script> </body></html>
上面代码是一个 LikeButton
组件,它的 getInitialState
方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state
属性读取。当用户点击组件,导致状态变化,this.setState
方法就修改状态值,每次修改以后,自动调用 this.render
方法,再次渲染组件。
注意
this.props 表示那些一旦定义,就不再改变的特性
this.state 是会随着用户互动而产生变化的特性
九、表单
用户在表单填入的内容,属于用户跟组件的互动,所以不能用 this.props 读取
实例
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var Input = React.createClass({ getInitialState: function() { return {value: 'Hello!'}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function () { var value = this.state.value; return ( <div> <input type="text" value={value} onChange={this.handleChange} /> <p>{value}</p> </div> ); } }); ReactDOM.render(<Input/>, document.getElementById('example')); </script> </body></html>
文本输入框的值,不能用 this.props.value
读取,而要定义一个 onChange
事件的回调函数,通过 event.target.value
读取用户输入的值。
十、组件的生命周期
组件的生命周期分为三个状态:
Mounting:已插入真实 DOM
Updating:正在被重新渲染
Unmounting:已移出真实 DOMReact 为每个状态都提供了两种处理函数,
will
函数在进入状态之前调用,did
函数在进入状态之后调用,三种状态共计五种处理函数。componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps):已加载的组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
实例
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var Hello = React.createClass({ getInitialState: function () { return { opacity: 1.0 }; }, componentDidMount: function () { this.timer = setInterval(function () { var opacity = this.state.opacity; opacity -= .05; if (opacity < 0.1) { opacity = 1.0; } this.setState({ opacity: opacity }); }.bind(this), 100); }, render: function () { return ( <div style={{opacity: this.state.opacity}}> Hello {this.props.name} </div> ); } }); ReactDOM.render( <Hello name="world"/>, document.getElementById('example') ); </script> </body></html>
在hello组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。
style={{opacity: this.state.opacity}}
第一重大括号表示这是 JavaScript 语法,第二重大括号表示样式对象。
参考
- React入门学习笔记
- React学习笔记_Babel 入门
- react-router学习笔记之入门
- react-router学习笔记之入门
- react学习笔记 item1 --- 基础入门
- React学习(一):React入门
- React 入门笔记1
- 阮一峰react入门笔记
- React入门笔记
- React Native入门笔记
- React入门笔记
- React Native入门学习笔记三(JSX语法)
- React学习入门实例
- React 入门实例学习
- React入门学习
- React入门学习
- react学习入门
- React前端入门学习
- UVa 1025 -A Spy in the Metro(动态规划)
- Spring boot 设置AOP
- Java 文件与字节流操作
- 2017"百度之星"程序设计大赛
- SpringMVC 方法名称解析器和视图解析器
- React入门学习笔记
- oracle启动与关闭的几种模式
- C#学习
- AndroidStudio2.2开发NDK
- Java NIO框架Netty教程(四) – ServerBootStrap启动流程源码分析
- 2017-8网页浏览记录
- ROS与DJI N3飞控建立连接并简单控制
- 网站开发(八)后台新增栏目的添加和显示
- Fidder 模拟POST GET请求