内容简介:首先React是单页应用时期出现的框架,它适合开发单页应用,随之配套的构建工具webpack、node环境。传统UI操作关注太多DOM的API细节。React帮助我们不必过多关注DOM的API实现细节,React对DOM进行了更高级别的抽象。
React解决了什么问题?
首先React是单页应用时期出现的框架,它适合开发单页应用,随之配套的构建工具webpack、node环境。
传统UI操作关注太多DOM的API细节。
React帮助我们不必过多关注DOM的API实现细节,React对DOM进行了更高级别的抽象。
使用React元素,描述我们的页面,细节的渲染,交给React去做。我们只需要告诉React,我写了什么组件,什么标签,什么事件就好了。
使我们开发页面,是组件化思想去开发,HTML、CSS、JS合为一体。比如我们创建一个标签,并给它样式和事件
let div = document.createElement('div') div.style.color = "red" div.innerHTML = "HTML标签" div.onclick = function() { //描述这个标签做什么交互 } class App extends Component { makeAction = () => { // div标签做的交互 } render() { return <div style={{color:"red"}} onClick={this.makeAction}> React元素</div> } }
React是什么?
React是一个UI库,可以帮你描述页面标签该如何展示。
React以组件化的方式,写标签。所有的页面都可以拆分成一块块组件。
React的出现,让前端开发者可以不用过多关注DOM的API细节,我们只需要声明式的使用React写入我们想要的标签,React就会帮我们去渲染它。
如果建立一个React项目呢?首先去官网,需要Node的环境,加上Git的环境。都可以去官网下载。
第一步:使用npx create-react-app命令创建一个React项目
我知道使用JSX语法加上React.createElement、ReactDOM.render、React.Component,只需要两个API就可以把我们写的标签,浏览器便可以展示出来。
JSX只是一个语法糖,它可以将javaScript文件里的<div>转换成React.createElement('div')
所以对于React.createElement、ReactDOM.render方法使用要知道。
React.createElement(eleType, attribute, text) ReactDOM.render(fn, string, class, node)
React.createElement(type,)创建和返回固定的元素。
React.render()方法,传入两个参数,第一个是对象,第二个是根节点
React.Component组块化方式开发页面里面的render方法
this.setState配合有状态组件更新整个DOM?
组件传入参数都在props里面
<App name="rong" /> function App(props){ return <div>{props.name}</div> } class App extends React.Component { render() { return <div>{this.props.name}</div> } }
JSX语法是JavaScript语法糖,本质动态创建React组件,也是React.createElement新一层封装
const menu = {Item: function(){return <div>来吧</div>} } //JSX语法 ReactDOM.render(<menu.Item />) //JavaScript原生语法 ReactDOM.render(React.createElement(menu.Item))
JSX语法本质和使用
组件的生命周期和方法
组件通信
React通信,也是单向数据传递的。组件的props传递给内部组件,内部组件传递给内内部组件。
使用Context的API进行跨层组件的通信,也挺繁琐,使用<context.Provider>在根组件,但其它深层次嵌套的组件,都需要引入<context.Consumer>,所以这个Context适合单独成为一个模块,被其它组件引用,降低复杂度。
React没有解决什么问题?
如何构建大型项目没有解决,如何管理大型项目的数据状态没有解决。
以上所述就是小编给大家介绍的《React知识梳理》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Data Mining
Jiawei Han、Micheline Kamber、Jian Pei / Morgan Kaufmann / 2011-7-6 / USD 74.95
The increasing volume of data in modern business and science calls for more complex and sophisticated tools. Although advances in data mining technology have made extensive data collection much easier......一起来看看 《Data Mining》 这本书的介绍吧!