前言
在三大前端框架中,Google开发的Angular.js出现最早但应用较少,国人开发的VUE在国内最火,今天的主角则是Facebook开发的React。
作为国内外最流行的前端框架,React最早被Facebook用于开发Instagram,在2013年5月开源。
React优点是,设计思想独特,性能出众,代码逻辑简单。一切以JS来实现,不使用模板,操作的对象是虚拟DOM。
虚拟DOM
虚拟DOM实际是React将DOM抽象成的JS对象,并可通过API来操作DOM。
也就是说,将DOM代码写到JS(script标签)中,而React负责将DOM代码进行渲染,并解析生成一个模拟DOM嵌套关系的虚拟DOM树对象。
再通过diff算法,在修改时逐层次的进行节点的比较,优先修改渲染虚拟DOM,对页面上真正发生变化的部分进行实际DOM操作,减少真实DOM的操作,实现页面元素的高效更新。
安装
直接通过npm安装。
npm i react npm i react-dom npm i babel-standalone
基础使用
首先需要引入react的js库
<!-- react核心文件 --> <script src="react.js"></script> <!-- 渲染页面中的DOM --> <script src="react-dom.js"></script> <!-- 将 ES6 代码转为 ES5 代码,这样就能在目前不支持 ES6 浏览器上执行 React 代码,并且Babel 内嵌了对 JSX 的支持,可以将JSX语法转换成JavaScript --> <script src="babel.js"></script>
然后需要创建DOM根节点,根节点下的内容被React所管理,下面是一个简单的hello world示例。
<div id="app">test</div> <script type="text/babel"> let myDom = <h1>hello react</h1> ReactDOM.render(myDom, document.getElementById("app")) </script>
JSX语法
上面代码中给myDom赋值的语法就是JSX,全称为JavaScript XML,是JavaScript的扩展语法。
优点是执行效率更高、类型安装,编译过程中就能及时发现错误、编写模板更加简单和快速。
需要注意的是以下几点:
1.必须严格按照W3C规范书写
例如`<input>`等自闭合标签必须写结束标签否则会报错。
let myDom = <input type="button" value=""></input>
2.JSX的注释方式与html和JS都不同
let myDom = <div> {/* 注释 */} <h1>myDom</h1> </div>
3.不支持多行标签
如果有多行必须有父标签包裹,并且最好用括号包裹起来。
let myDom = (<div> <input type="button" value=""></input> <input type="button" value=""></input> </div>)
4.赋变量、计算、调用函数等时同样需要用大括号包裹
let text = "hello react" let count = 100 let user = { name: "zhangsan", age: 18 } function aboutUser(userObj){ return "name is " + userObj.name + ",age is " + userObj.age } let myDom1 = <div>{text}</div> let myDom2 = <div>{count+1}</div> let myDom3 = <h1>{aboutUser(user)}</h1>
5.使用 className来替代class
由于class是JavaScript的关键字,因此在JSX中需要使用className来设置类名。
let myDom = <div className="box"></div>
6.设置样式
let myDom = <h1 style={{color:"red"}}>testStyle</h1>
React元素与组件
React元素是构成React应用的最小部件,例如前面hello world实例中的<h1>hello react</h1>
,与浏览器中的DOM元素不同,React元素是创建开销极小的对象,当React元素变化后,ReactDOM会自动去更新真实DOM。
React元素是不可变对象,一旦被创建就不能再更改它的子元素或者属性,更新它的唯一方式是创建一个全新的元素,并将其传入ReactDOM.render()。React元素代表了某个特定时刻的DOM元素状态。
而React组件(component)概念上类似于JavaScript函数,将React元素组成一个有特定功能、独立可复用的部件,能接受任意的入参(props),有自己的状态(state)和生命周期,并返回用于描述页面UI的JSX代码片段。
当应用的UI都是使用组件完成时,就是一个组件化的应用,能够实现页面局部功能的代码集合,简化页面复杂程度,提高运行效率,降低维护难度。
函数组件
function Welcome(props){ return <h1>Hello,{props.name}</h1> } var obj = {name:"zhangsan"}; let myDom = Welcome(obj); // 或者写成以下形式 let myDom = <Welcome {...obj} />; // React会将JSX所接收的属性(attributes)以及子组件(children)转换成单个对象(props)传递给组件 let myDom = <Welcome name="zhangsan" />;
class组件
class Welcome extends React.Component { render() { return <h1>hello,{this.props.name}</h1>; } } let myDom = <Welcome name="zhangsan" />
设置默认入参
可以通过defaultProps设置组件的默认参数,当传入参数缺失时自动调用默认参数。
function Welcome(props){ return <h1>Hello,{props.name}</h1> } Welcome.defaultProps = {name:"zhangsan"}; //默认参数不适用于Welcome()形式 let myDom = <Welcome />;
注意
1.组件名称必须以大写字母开头,小写字母开头的标签会被视为原生DOM标签。
2.传入的props参数为只读,不能进行修改,如果需要React组件随用户操作、网络响应或其他变化而动态更改输出内容,那么可以通过下面的状态(state)实现。
React组件的状态与生命周期
以下是一个每秒钟刷新一次的时钟组件,通过计时器每秒钟获取一次时间并重新渲染组件。
class Clock extends React.Component { render(){ return ( <div> <h1>Hello,react!</h1> <h2>It is {this.props.date.toLocaleTimeString()}.</h2> </div> ) } } function tick() { ReactDOM.render( <Clock date={new Date()} />, document.getElementById("app") ) } setInterval(tick,1000)
这样显然是很蠢的实现方式,理想的情况下应该能够让时钟组件自我更新,下面代码就是利用state(状态)实现的时钟组件。
state与props类似,但state是私有的,并且完全受控于当前组件。
class Clock extends React.Component { // 构造函数,初始化state constructor(props) { super(props); this.state = {date:new Date()}; } // 挂载(mount)函数,当组件第一次被渲染到DOM(render())之后执行,这里用来设置计时器。 componentDidMount() { this.timerID = setInterval( ()=> this.tick(),1000 ); } // 卸载(unmount)函数,当DOM中组件被删除后执行,用于垃圾回收等。 componentWillUnmount() { clearInterval(this.timerID) } tick(){ // 更新state this.setState({ date: new Date() }) } render(){ return ( <div> <h1>Hello,react!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ) } } ReactDOM.render(<Clock />,document.getElementById("app"))
其中,componentDidMount()(挂载函数)和componentWillUnmount()(卸载函数)就被称为生命周期函数。
注意
1.可以给state赋值的地方只有构造函数中。
2.state不能直接修改,应该使用setState()方法。
这样React就会知道state已经改变了,自动调用render()方法渲染更新后的组件。
3.state的更新可能是异步的。
原因是出于性能考虑,React可能会把多个setState()合并成一个调用。
//错误用法 this.setState({ counter: this.state.counter + this.props.increment }) //正确用法 this.setState((state,props) => { counter: state.counter + props.increment })
4.数据是向下流动的。
state是私有的,不能直接被父组件或子组件访问,但可以将state作为props向下传递到子组件中。
<FormattedDate date={this.state.date} />
事件处理
创建事件
事件命名采用小驼峰式,并且需要传入函数作为事件处理函数。
// 传统HTML <button onclick="handleClick()">testEvent</button> //React let myDom = <button onClick={handleClick}>testEvent</button>
阻止默认行为
传统HTML中可以通过返回false的方式阻止默认行为,而React中必须显式使用preventDefault。
//传统HTML <a href="#" onclick="console.log('This link was clicked but refuse');return false">click me</a> //React function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('This link was clicked but refuse'); } return ( <a href="#" onClick={handleClick}>click me</a> ) }
class组件的事件处理函数
下面的代码是一个可以让用户切换开关状态的按钮。
class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // 为了在回调中使用 `this`,这个绑定是必不可少的,否则回调中的this会是undefined this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(state => ({ isToggleOn: !state.isToggleOn })); } render() { return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'} </button> ); } }
如果觉得bind麻烦,可以使用class fields正确的绑定回调函数。
class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; } handleClick = () => { this.setState(state => ({ isToggleOn: !state.isToggleOn })); } render() { return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'} </button> ); } }
向事件处理函数中传递参数
//箭头函数方式,e为React的事件对象 let myDom = <button onClick={(e) => {handleClick(msg,e)}}>testEvent</button> //Function.prototype.bind方式 let myDom = <button onClick={this.handleClick.bind(this,msg)}>testEvent</button>
因为害怕自己并非明珠而不敢刻苦琢磨,
又因为有几分相信自己是明珠,
而不能与瓦砾碌碌为伍。
《山月记》
——中岛敦
评论
774814 332531I believe this internet website has quite superb composed subject material articles . 174236
I am impressed with this internet site, rattling I am a fan.
https://youtu.be/MjGmtRbJvPw
579462 767114Yay google is my king assisted me to discover this outstanding internet site! . 774030
I’d constantly want to be update on new articles on this internet site, saved to my bookmarks! .
https://youtu.be/DH_2g3CEfLU
Wonderful blog! I found it while browsing on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Appreciate it
https://youtu.be/JZikmRMAyCU
Simply wanna remark on few general things, The website style is perfect, the written content is really fantastic. “If a man does his best, what else is there” by George Smith Patton, Jr..
https://youtu.be/TFVC63qHomk
950487 272205Id want to consult you here. Which isnt some thing Which i do! I enjoy reading a post that can make individuals feel. Also, appreciate your permitting me to comment! 172190
245664 526560Lovely sharp post. Never considered that it was that simple. Praises to you! 487344
39813 34189jobs for high school students – Search for Jobs on our website, we give several great links to the greatest and biggest Portals to acquiring a Job as a high school student! 710092
117457 289511I truly enjoy examining on this website , it has great content . 87914
186039 661631Deference to internet site author , some wonderful entropy. 369557
I’d have to examine with you here. Which is not one thing I usually do! I take pleasure in reading a post that may make folks think. Additionally, thanks for permitting me to comment!
https://youtu.be/qtg_m9zJWEE
I was very happy to seek out this internet-site.I wanted to thanks on your time for this glorious learn!! I positively enjoying every little bit of it and I’ve you bookmarked to check out new stuff you weblog post.
https://youtu.be/FcxQZ9OapjY
Pretty great post. I just stumbled upon your blog and wanted to mention that I have really loved surfing around your blog posts. In any case I’ll be subscribing on your rss feed and I’m hoping you write again soon!
https://youtu.be/BjQ-yUPpB7k
Those are yours alright! . We at least need to get these people stealing images to start blogging! They probably just did a image search and grabbed them. They look good though!
https://youtu.be/-WLKH196lNg
375401 955276But wanna admit that this is really beneficial , Thanks for taking your time to write this. 96245
219889 751606Hello! I just would like to give a huge thumbs up for the excellent information youve here on this post. I might be coming back to your weblog for far more soon. 786010
Its like you read my mind! You appear to know so much about this, like you wrote the book in it or something. I think that you can do with some pics to drive the message home a little bit, but other than that, this is magnificent blog. An excellent read. I will definitely be back.
https://youtu.be/Waw_J94SaJI
Your place is valueble for me. Thanks!…
https://youtu.be/k1UdzU3HSOg
https://www.youtube.com/watch?v=LOWJLmAxG40
Thanks for finally talking about > React入门(上)
pro nerve 6 ingredients list
Good info. Lucky me I reach on your website by accident, I bookmarked it.
https://youtu.be/XPvEYLNrR7s
Most of the things you say happens to be supprisingly accurate and that makes me ponder the reason why I had not looked at this with this light before. This particular article really did switch the light on for me as far as this issue goes. Nonetheless at this time there is actually one factor I am not necessarily too comfy with so whilst I attempt to reconcile that with the core theme of your issue, allow me see what the rest of your readers have to say.Very well done.
https://youtu.be/aBsZba1VO1g