reactJS前端学习

Posted 2021-04-30 知用教育

选择ReactJS的理由

1

React效率高

页面组建化。可组合、可重用、可保护。

React可以创建存放组件的虚拟DOM（文档对象模型Document Object Model）。

这一特点为开发人员提供了高度灵活性和惊人的性能收益，从而大幅提升了工作效率。

javascript库React的主要优势是合理地利用了本地API达到了跨平台的效果。

2

SEO友好

JavaScript框架的缺陷之一是对搜索引擎十分不友好，尽管最近已经有所改进。

React.js在这方面却做的很出色。你可以在服务器端运行React.js，虚拟DOM可以像常规的web页面一样返回给浏览器，不需要任何特殊技巧。

3

注重用户界面

React Native十分重视用户界面。通过设备本地环境与React Native的Javascript交互，可以给用户提供完美的响应式界面。虽然这一定程度上增加了应用的加载时间，但也保证了程序运行过程中的流畅。

react基本知识点

1、组件尽可能的小

较小的类、模块更容易理解、测试和维护，对于组件来说也是一样。

2、大小写敏感

React 的 JSX 里约定分别使用首字母大、小写来区分本地模块的类和 html 标签。

3、添加自定义属性之前添加data-前缀：

      <div data-custom-attribute="foo" />

4、react中的表达式的用法：

　　在className中直接可以判断什么状态用什么样式：className={2 > 1 ? 'class-a' : 'class-b'}

　　在模块中直接根据条件来判断具体用哪一个组件：{window.isLoggedIn ? <Nav /> : <Login />}

其他知识点

1.React json(数据遍历)

2.React Props

3.React State(状态)

4.React Refs

1

reactJS json

数组的遍历在javascript一般会用for循环。在reactJS中用map来遍历，for循环会报错！一定要记住不要忘记写return。

2

React Props

以下实例中 name 属性通过 this.props.name 来获取。

  

实例演示了如何在应用中组合使用 state 和 props 。我们可以在父组件中设置 state， 并通过在子组件上使用 props 将其传递到子组件上。在 render 函数中, 我们设置 name 和 site 来获取父组件传递过来的数据。

3

React State(状态)

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

4

React Refs

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

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

使用方法：

绑定一个 ref 属性到 render 的返回值上：

<input ref="myInput" />

var input = this.refs.myInput;

var inputValue = input.value;

热点城市平均跌幅达8成

1、setState()是异步的

this.setState()会调用render方法，但并不会立即改变state的值，state是在render方法中赋值的。所以执行this.setState()后立即获取state的值是不变的。同样的直接赋值state并不会出发更新，因为没有调用render函数。

2、组件的生命周期

componentWillMount，componentDidMount 只有在初始化的时候才调用。

componentWillReceivePorps，shouldComponentUpdate，componentWillUpdata，componentDidUpdate 只有组件在更新的时候才被调用，初始化时不调用。

3、组件命名的首字母必须是大写，这是类命名的规范。

4、标签里用到的，for 要写成htmlFor，因为for已经成了关键字。

5、组件卸载之前，加在dom元素上的监听事件，和定时器需要手动清除，因为这些并不在react的控制范围内，必须手动清除。

6、如果使用es6class类继承react的component组件，constructor中必须调用super，因为子类需要用super继承component的this，否则实例化的时候会报错。