React是一款颠覆式的前端解决方案,其创新的编程思想以及衍生出来的一些生态圈技术可以说是引领了整个前端的发展。
每一种新事物的出现都是为了解决某些问题,React也不例外。所以了解了它要解决的问题,就能更好的接受这个新的框架。在React出现之前,原生的JavaScript有哪些痛点:
-
原生JavaScript操作DOM繁琐、效率低。 -
使用JavaScript直接操作DOM,浏览器会进行大量的重绘重排。 -
原生JavaScript没有组件化编码方案,代码效率低。
为什么要选择React?
-
其声明式的语法可以让你直观的去描述和组织复杂的界面逻辑 -
其繁荣的生态圈则为解决各种问题带来了大量的最佳实践 -
其活跃的技术社区则让你在遇到问题的时候 能快速得到帮助 -
React技术栈不仅可以让你从容面对大型项目的开发其编程思想还可以运用到React Native进行原生开发 -
其server端渲染的技术则可以让你进行同构的后端开发
React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。
React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。
以下实例创建一个名称扩展为 React.Component 的 ES6 类,在 render() 方法中使用 this.state 来修改当前的时间。
添加一个类构造函数来初始化状态 this.state,类组件应始终使用 props 调用基础构造函数。
React 实例
class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return (
Hello, world!
现在是 {this.state.date.toLocaleTimeString()}.
接下来,我们将使Clock设置自己的计时器并每秒更新一次。
将生命周期方法添加到类中
在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要。
每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载。
同样,每当 Clock 生成的这个 DOM 被移除的时候,我们也会想要清除定时器,这在 React 中被称为卸载。
我们可以在组件类上声明特殊的方法,当组件挂载或卸载时,来运行一些代码:
React 实例
class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return (
Hello, world!
现在是 {this.state.date.toLocaleTimeString()}.
尝试一下 »
实例解析:
componentDidMount() 与 componentWillUnmount()
方法被称作生命周期钩子。
在组件输出到 DOM 后会执行componentDidMount()
钩子,我们就可以在这个钩子上设置一个定时器。
this.timerID
为定时器的 ID,我们可以在componentWillUnmount()
钩子中卸载定时器。
代码执行顺序:
-
当 被传递给
ReactDOM.render()时,React 调用
Clock组件的构造函数。 由于
Clock需要显示当前时间,所以使用包含当前时间的对象来初始化
this.state` 。 我们稍后会更新此状态。 -
React 然后调用 Clock
组件的render()
方法。这是 React 了解屏幕上应该显示什么内容,然后 React 更新 DOM 以匹配Clock
的渲染输出。 -
当 Clock
的输出插入到 DOM 中时,React 调用componentDidMount()
生命周期钩子。 在其中,Clock
组件要求浏览器设置一个定时器,每秒钟调用一次tick()
。 -
浏览器每秒钟调用 tick()
方法。 在其中,Clock
组件通过使用包含当前时间的对象调用setState()
来调度UI更新。 通过调用setState()
,React 知道状态已经改变,并再次调用render()
方法来确定屏幕上应当显示什么。 这一次,render()
方法中的this.state.date
将不同,所以渲染输出将包含更新的时间,并相应地更新 DOM。 -
一旦 Clock
组件被从 DOM 中移除,React 会调用componentWillUnmount()
这个钩子函数,定时器也就会被清除。
数据自顶向下流动
父组件或子组件都不能知道某个组件是有状态还是无状态,并且它们不应该关心某组件是被定义为一个函数还是一个类。
这就是为什么状态通常被称为局部或封装。 除了拥有并设置它的组件外,其它组件不可访问。
以下实例中 FormattedDate 组件将在其属性中接收到 date 值,并且不知道它是来自 Clock 状态、还是来自 Clock 的属性、亦或手工输入:
React 实例
function FormattedDate(props) { return
现在是 {props.date.toLocaleTimeString()}.
; } class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( Hello, world!
这通常被称为自顶向下或单向数据流。 任何状态始终由某些特定组件所有,并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。
如果你想象一个组件树作为属性的瀑布,每个组件的状态就像一个额外的水源,它连接在一个任意点,但也流下来。
为了表明所有组件都是真正隔离的,我们可以创建一个 App 组件,它渲染三个Clock:
React 实例
function FormattedDate(props) { return
现在是 {props.date.toLocaleTimeString()}.
; } class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( Hello, world!
以上实例中每个 Clock 组件都建立了自己的定时器并且独立更新。
在 React 应用程序中,组件是有状态还是无状态被认为是可能随时间而变化的组件的实现细节。
我们可以在有状态组件中使用无状态组件,也可以在无状态组件中使用有状态组件。
以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !