React.js 小书

React小书

本书作者:胡子大哈

书名:React.js 小书

第一阶段

对React.js的初级应用,通过实际需求慢慢引出react的组件化的特点。

本次记录作者对于每个阶段的总结:

JSX 是 JavaScript 语言的一种语法扩展,很像HTML。理解JSX是如何解析成HTML的

[图片上传失败...(image-71eef3-1607529200043)]

React.js 可以用 JSX 来描述组件长什么样的。

react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素,并且渲染到页面上。

自定义的组件都必须要用大写字母开头,普通的 HTML 标签都用小写字母开头。

render函数内必须要用一个外层元素把内容进行包裹。

事件监听:这些on*的事件监听只能用在普通的 HTML 的标签上,而不能用在组件标签上。

React.js 的事件监听方法需要手动 bind 到当前实例。

使用setState 接受对象参数,调用的时候,React.js 会更新组件的状态state ,并且重新调用 render 方法,然后再把render方法所渲染的最新内容显示到页面上。

setState 接受一个对象或者函数作为参数。

调用setState的时候,React.js 不会马上修改state。而是将这个对象放到一个更新队列,稍后把新的状态提取出来合并到state当中。

在使用一个组件的时候,可以把参数放在标签的属性当中,所有的属性都作为 props 对象的键值;

props 不可表,React.js 希望一个组件在输入的确定的 props 的时候,能够输出确定的 UI 显示形态。

state 是让组件控制自己的状态,props 是让外部对组件自己进行配置。

对于用表达式套数组罗列到页面上的元素,都要为每个元素加上 key 属性,这个key 必须是每个元素唯一的标识(一般是取后台数据)

第一阶段实战

评论功能实现:

根据需要实现的效果图进行 组件拆分,本次是将整体、输入、评论列表展示、每一条内容展示。一共4个组件。

组件树 如图所示:

动手实现:

1、先搭起整个框架的结构,定义好各个组件。

2、逐步搭建靠近根节点的组件。

3、逐步完善当前节点的子节点。

子节点向父节点传递数据的时候,使用父组件在子组件定义的回调函数。先实现子组件的具体事件,然后通过子组件的函数,调用this.props.key (key值父组件传递的函数)。

总结:

1、实现功能之前先理解、分析需求、划分组件。并且掌握划分组件的基本原则 ---- 可复用、可维护。

2、受控组建的概念,React.js 值如果是受到 React.js 的控制,那么就是受控组件。

3、组件之间使用 props 通过父元素传递数据的技巧。

第二阶段

一、前端应用的状态管理——状态提升

上个评论功能的案例中,当有别的组件也依赖这个comments数据或者有别的组件会影响这个数据,需要把这个数据来源往上一个父组件的层

二、挂在阶段的组件生命周期

我们把React.js 将组件渲染,并且构造DOM 元素然后塞入页面的过程称为组件的挂载。

顺序

constructor()
componentWillMound()
render()
componentDidMount()
componentWillUnmount()

当前界面触发setState会重新加载render方法,不会走componentDidMount()

总结

  • componentWillMount : 组件挂载开始之前,也就是在render方法之前调用

  • componentDidMount : 组件挂载完成以后,也就是 DOM 元素已经插入页面后调用。

  • componentWillUnmount: 组件对应的 DOM 元素从页面中删除之前调用

所有模块式开发,遵循 “自顶向下,逐步求精”

重新构造和销毁组件的时候,回调函数还在不停的尝试 setState,由于setState 只能在已经挂载或正在挂载的组件上调用。

ref 和 React.js 中的DOM 操作

 this.intput = input} />

ref属性是一个函数,当input的元素在页面上挂载完成以后,React.js 就会调用这个函数,并且把这个挂载以后的DOM节点传给这个函数。但是要记住一个原则:能不用ref就不用,多余的DOM操作其实是代码里面的“噪音”,不利于我们理解和维护

给自定义组件传入子元素,只需使用{this.props.children},甚至可以指定某一位 {this.props.children[0]}

想要当前js解析 html标签,需要使用 dangerouslySetInnerHTML = {{__html: this.state.content}}

PropsTypes 和组件的参数验证

static propTypes = {
comment : PropTypes.object
}

static propsTypes = {
comment: PropTypes.object.isRequired
}

还有一系列的参数

PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string
PropTypes.node
PropTypes.element

避坑

const 修饰的变量不允许修改,let 可以修改

你可能感兴趣的:(React.js 小书)