内容简介:首先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知识梳理》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Algorithm Design
Jon Kleinberg、Éva Tardos / Addison-Wesley / 2005-3-26 / USD 144.20
Algorithm Design introduces algorithms by looking at the real-world problems that motivate them. The book teaches students a range of design and analysis techniques for problems that arise in compu......一起来看看 《Algorithm Design》 这本书的介绍吧!