React 注意内容，React 补充学习

最新推荐文章于 2022-05-27 08:00:00 发布

林间风雨

最新推荐文章于 2022-05-27 08:00:00 发布

阅读量171

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/jack_rose_me/article/details/109268831

版权

React 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

34、小项目例子

https://blog.csdn.net/a153375250/article/details/52667739?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160369277219725222401335%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160369277219725222401335&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v28-4-52667739.pc_first_rank_v2_rank_v28&utm_term=react+%E5%85%A5%E9%97%A8&spm=1018.2118.3001.4187

33、http://www.ruanyifeng.com/blog/2015/03/react.html

32、React Refs

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。

这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

31、当你需要从子组件中更新父组件的 state 时，你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上

https://www.runoob.com/react/react-forms-events.html

30、event.preventDefault()

该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。

29、在 React 中，不使用 selected 属性，而在根 select 标签上用 value 属性来表示选中项。

28、HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。

在 HTML 当中，像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。

27、 React AJAX

https://www.runoob.com/try/try.php?filename=try_react_ajax

26、React 实例

https://www.runoob.com/try/try.php?filename=try_react_life_cycle2

25、

24、

23、isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。

22、一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发render()调用。

21、callback，可选参数，回调函数。该函数会在组件render()方法调用后调用。

20、关于setState

不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。

setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。

setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

19、元素的 key 只有在它和它的兄弟节点对比时才有意义。

比方说，如果你提取出一个 ListItem 组件，你应该把 key 保存在数组中的这个 <ListItem /> 元素上，而不是放在 ListItem 组件中的 <li> 元素上。

元素的 key 在他的兄弟元素之间应该唯一

18、如果列表可以重新排序，我们不建议使用索引来进行排序，因为这会导致渲染变得很慢。

17、

16、在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为，你必须明确的使用 preventDefault。

例如，通常我们在 HTML 中阻止链接默认打开一个新页面，可以这样写：

<a href="#" onclick="console.log('点击链接'); return false">
  点我
</a>

在 React 的写法为：

function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('链接被点击'); } return ( <a href="#" onClick={handleClick}> 点我 </a> ); }

15、React 事件处理

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:

React 事件绑定属性的命名采用驼峰式写法，而不是小写。
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

HTML 通常写法是：

<button onclick="activateLasers()">
  激活按钮
</button>

React 中写法为：

<button onClick={activateLasers}>
  激活按钮
</button>

14、更多验证器说明如下：

13、React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库

12、以通过组件类的 defaultProps 属性为 props 设置默认值，实例如下：

class HelloMessage extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } HelloMessage.defaultProps = { name: 'Runoob' }; const element = <HelloMessage/>; ReactDOM.render( element, document.getElementById('example') );

11、state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而子组件只能通过 props 来传递数据。

10、所列举将箭头函数用法恢复成常规写法，报错：tick() 不是一个方法的原因在于 setInterval 是 window 的方法，内闭包使用 this 当然也指向 window，window 没有 tick() 方法故报错。

this.timerID = setInterval(function(){   //setInterval是window的方法
    return this.tick();                  //this指的是window
  },1000
);

所以需要更改指向，在 setInterval 外部定义变量，let that/_this = this，才能正常使用 _this.tick()。

componentDidMount(){
    let _this = this;
    this.timerID = setInterval(function(){
      _this.tick();
    }, 1000);
}

9、箭头函数的基本语法如下：

(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式（单一）
//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}

// 没有参数的函数应该写成一对圆括号。
() => {函数声明}

根据以上概念，尝试将 setInterval 中调用 tick() 的方式改为通常声明方式：

this.timerID = setInterval(function(){
    return this.tick();
  },1000
);

但是会报错，tick() 不是一个方法。

2、this.tick()

this.tick() 中的 this 指代的是 function，而不是我们想要的指代所在的组件类 Clock，所以我们要想办法让 this 能被正常指代。这里我们采用围魏救赵的办法:

let that = this;
this.timerID = setInterval(function () {
  return that.tick();
},1000);

在闭包函数的外部先用 that 引用组件 Clock 中挂载组件方法 componentDidMount() 中 this 的值，然后在 setInterval 中闭包函数中使用that，that 无法找到声明，就会根据作用域链去上级（上次层）中继承 that，也就是我们引用的组件类 Clock 中的 this。

8、创建三个Clock 实例中，每个 Clock 组件都建立了自己的定时器并且独立更新。

在 React 应用程序中，组件是有状态还是无状态被认为是可能随时间而变化的组件的实现细节。

我们可以在有状态组件中使用无状态组件，也可以在无状态组件中使用有状态组件。

7、这通常被称为自顶向下或单向数据流。任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。

如果你想象一个组件树作为属性的瀑布，每个组件的状态就像一个额外的水源，它连接在一个任意点，但也流下来。

表明所有组件都是真正隔离的

6、componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子。

在组件输出到 DOM 后会执行 componentDidMount() 钩子，我们就可以在这个钩子上设置一个定时器。

this.timerID 为定时器的 ID，我们可以在 componentWillUnmount() 钩子中卸载定时器。

5、const element = <HelloMessage /> 为用户自定义的组件。