《网站推广策划》,wordpress 写博客,it运维工作总结,wordpress主题中英文希望本文能帮助没接触过 React 的同学#xff0c;对React有个大致的理解。最近要做一个“前端零基础的入门课程分享”#xff0c;很多非前端同学可能只是知道 React 是个前端框架#xff0c;整体对 React 的理解还是很模糊#xff0c;借此机会#xff0c;分享一下我对 Rea…希望本文能帮助没接触过 React 的同学对React有个大致的理解。最近要做一个“前端零基础的入门课程分享”很多非前端同学可能只是知道 React 是个前端框架整体对 React 的理解还是很模糊借此机会分享一下我对 React 的理解。最重要的写在前面React是一个前端UI库。我对React的理解主要就两点组件化数据驱动在React基础上周边生态提供了更多强大功能状态管理、路由、React Native等。一、组件化这里就有了第一个抽象概念组件。什么是组件组件是对逻辑的封装。对于前端 UI 层来说组件就是将 UI 封装起来。供任意组装和调用。太抽象了我提炼成三个点帮助大家理解写React就是写组件。将一个界面分成若干个组件组合包装成完整页面写每一个组件的时候每个组件有自己的生命周期在组件不同的周期里做自己想要做的逻辑子组件接受父组件的参数(Props) 、 以及维护组件内部的状态(State)最简单的组件 HelloWorld下面我们看一个最简单的类组件 HelloWorld// HelloWorld.jsx
class HelloWorld extends React.Component {componentDidMount () {console.log(HelloWorld 第一次挂载到界面上);}componentWillUnmount () {console.log(HelloWorld 即将移除销毁);}render() {return (divHello World/div);}
}
这样就完成了一个简单的 HelloWorld 组件。componentDidMount、componentWillUnmount是两个常用的生命周期函数传送门更多生命周期。render 函数在每次渲染时调用返回的内容就是组件最终的界面示例中return 了一个Hello World 的 div。子组件调用示例再写一个 按钮组件 HelloButton// HelloButton.jsx
class HelloButton extends React.Component {render() {return (button我是一个按钮/button);}
}写一个父组件 把 HelloWorld 和 HelloButton 两个组件包裹进来// Wrap.jsx
class Wrap extends React.Component {render() {return (divHelloWorld/HelloWorldHelloButton/HelloButton/div);}
}可以看到 React 调用子组件其实就是把子组件当做一个标签跟 div 这些标签一样。Wrap 组件最终的展示就是一个HelloWord 组件 一个HelloButton 组件如下图。Wrap组件效果图组件化小结基于对组件化的理解写 React 就是写一个个组件再组装起来。所以如果用分治的思想我们只要关注每个组件怎么实现就好了。二、数据驱动现在来讲我的另一个理解——数据驱动那么组件有哪些数据呢组件有两种数据父组件传递的参数 Props和组件内部的状态State先来分别看一个例子。组件的状态 State先来看效果组件 State 示例效果图完整代码如下// App.jsx
class App extends React.Component {constructor () {super()this.state {count: 0}}onIncrease () {this.setState({ count: this.state.count 1 })}onDecrease () {this.setState({ count: this.state.count - 1 })}render() {return (divdiv当前数值{this.state.count}/divbutton onClick{this.onIncrease}点我-1/buttonbutton onClick{this.onDecrease}点我1/button/div);}
}解析constructor方法中设置了一个 State 属性 count初始值为 0声明了两个方法 onIncrease 和 onDecrease方法里对 count 设置了 -1 的操作 render 函数里渲染了一行文字 两个按钮这里有两个注意点return里面的内容是 jsx 模板大括号内的内容是一个 js 变量或者表达式React 会自动渲染。例如 {this.state.count} 渲染时就会渲染成count的值给 button 指定了属性(Props) onClick即当 button 点击时会自动调用 指定的函数。建议没看到上面例子的同学带着上面的解析重新尝试能否看懂。上面的例子中count 就是 App组件 的一个 State用来直接将 count 显示在界面上当接收到点击事件时改变了 count 这个 State。父组件传递的属性 Props从语义上理解Props 是父组件传递给子组件的属性与 State 不同的是子组件不能修改只有父组件才能修改。先看看如何使用 Props// HelloMessage.jsx
class HelloMessage extends React.Component {render() {return (divdivHello {this.props.username}/div/div);}
}上述例子使用的示例、效果如下HelloMessage username秦书羽 / Props 使用效果图解析子组件在使用Props时使用 this.props 直接调用即可父组件在使用子组件时应将需要的数据传给子组件。数据驱动的理解上面两个例子中界面都是根据数据来渲染且随着数据变化自动更新这就是数据驱动渲染。再说下数据驱动的理解界面的渲染由数据(State和Props)决定数据变更驱动页面更新人机交互(点击、按钮操作等)驱动数据变更界面根据数据自动更新对于开发者开发一个组件需要分成两部分数据 和 视图再根据用户行为修改数据即可从这个方面去理解React 是一个 Model - View 的一个框架。“数据驱动”的理解图数据驱动模式带来的收益个人见解数据和视图分层逻辑解耦清晰优雅的多人机交互的行为太多、先点哪个按钮、再点哪个按钮传统开发方式需要判断的东西太多数据驱动的话只需要根据当前的数据修改对应的数据大大简化利于单元测试。三、总结在开发模式上React 给我们带来了 组件化和数据驱动。其内部也基于此做了大量的性能优化React 是一个基础的 UI 库作者和社区提供了更多配套如React-Router(路由)、Redux(全局状态管理)同学们可以在 React 的理解基础上 向上扩展本文都是在讲 React 的 组件化和数据驱动。但我认为不是因为有了 React 才有 组件化和数据驱动而是先有 组件化和数据驱动 的想法为了达到这样的设计最终实现了 React 。本文没有涉及原理有兴趣的同学可以自行学习。字节跳动杭州游戏中台急招Web前端(实习、P5-P61-5 年 都要)新业务发展好。欢迎简历 qinshuyubytedance.com部门直推。职位JD仅供参考感谢您的阅读欢迎评论区指正、交流。
