react 学习笔记

 note8 分钟读完 (大约1209个字)

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

  • 没有经过特殊处理的话，这些  on\*  的事件监听只能用在普通的 HTML 的标签上，而不能用在组件标签上

  • React.js 的事件监听方法需要手动  bind  到当前实例，这种模式在 React.js 中非常常用。

  • 当我们要改变组件的状态的时候，不能直接用  this.state = xxx  这种方式来修改，如果这样做 React.js 就没办法知道你修改了组件的状态，它也就没有办法更新页面。所以，一定要使用 React.js 提供的  setState  方法，它接受一个对象或者函数作为参数。

  • React.js 内部会把 JavaScript 事件循环中的消息队列的同一个消息中的  setState  都进行合并以后再重新渲染组件。

  • 可以通过给组件添加类属性  defaultProps  来配置默认参数。

  • props  一旦传入，你就不可以在组件内部对它进行修改。但是你可以通过父组件主动重新渲染的方式来传入新的  props，从而达到更新的效果。

  • 没有  state  的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）

  • 对于用表达式套数组罗列到页面上的元素，都要为每个元素加上  key  属性，这个  key  必须是每个元素唯一的标识。

受控组件：

React.js 认为所有的状态都应该由 React.js 的 state 控制，只要类似于<input />、<select />、<textarea>这样的输入控件被设置了  value  值，那么它们的值永远以被设置的值为准。值不变，value  就不会变化。

在 React.js 当中必须要用  setState  才能更新组件的内容，所以我们需要做的就是：监听输入框的  onChange  事件，然后获取到用户输入的内容，再通过  setState  的方式更新  state  中的  username，这样  input  的内容才会更新。

子组件传递消息给父组件

父组件只需要通过  props  给子组件传入一个回调函数。子组件调用  props  中的回调函数并且将  state  传入该函数即可。

举例：

状态提升

当某个状态被多个组件依赖或者影响的时候，就把该状态提升到这些组件的最近公共父组件中去管理，用  props  传递数据或者函数来管理这种依赖或着影响的行为。

对于不会被多个组件依赖和影响的状态（例如某种下拉菜单的展开和收起状态），一般来说只需要保存在组件内部即可，不需要做提升或者特殊的管理。

操作 DOM

1. 使用回调： 在元素上加一个  ref  属性，这个属性值是一个函数，这个节点挂载到页面上后，这个 dom 节点会作为参数传给这个函数

1
2
// 把这个 div 保存到 this 上
<div ref={div => (this.div = div)}></div>

然后我们就可以在  componentDidMount中 或之后使用这个 DOM 元素

2. 使用 React.createRef()

1
2
3
4
5
6
7
8
9
10
11
// 在 constructor 中声明
this.third = React.createRef();
// 在 render 函数中:
<input type="text" defaultValue="Third" ref={this.third} />;
// 获取 ref
this.third.current;

// 在 render 函数里面
<input type="text" defaultValue="First" ref="first" />;
// 获取 ref
this.refs.first;
  • _能不用  ref  就不用_。特别是要避免用  ref  来做 React.js 本来就可以帮助你做到的页面自动更新的操作和事件监听。多余的 DOM 操作其实是代码里面的“噪音”，不利于我们理解和维护。
  • 组件标签也可以加上  ref，此时获取的是组件实例。

props.children

组件标签也能像普通的 HTML 标签那样编写内嵌的结构

1
2
3
4
5
6
7
8
render() {
    return (
      <Card>
          <Test />
      </Card>
    )
  }
  // Card 组件中能通过 this.props.children 获取到 <Test />

React.js 默认就支持这种写法，所有嵌套在组件中的 JSX 结构都可以在组件内部通过  props.children  获取到，props.children  是一个数组，React.js 就是把我们嵌套的 JSX 元素一个个都放到数组当中。

PropTypes

引入  prop-types

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class a extends Component {
    static propTypes = {
      username: PropTypes.string.isRequired,
      ...
      PropTypes.array
      PropTypes.bool
      PropTypes.func
      PropTypes.number
      PropTypes.object
      PropTypes.string
      PropTypes.node
      PropTypes.element
    }
  }

通过  PropTypes  给组件的参数做类型限制，可以在帮助我们迅速定位错误，这在构建大型应用程序的时候特别有用；另外，给组件加上  propTypes，也让组件的开发、使用更加规范清晰。

react 学习笔记

https://downhill6.pages.dev/2019/12/16/react 学习笔记/

作者

大下坡

发布于

2019-12-17

更新于

2019-12-17

许可协议

#
关注我
×