React学习笔记1

Posted 2020-08-08

前端学习笔记

今天开始学习react.js特开这一篇随笔作为react的学习笔记，主要记录看到的重点内容和自己的心得感想：

一. 基本组件和方法

1.reactjs引入了一个虚dom的概念，对于每一个dom点都会存在一个状态，如果这个dom上的属性发生了改变，在react中如果发生了变化：首先会调用“diff”方法，去识别这一改变。之后会reconciliation，更新diff之后的结果。因为reactjs使用的是faek dom所以改变的只是需要改变的一部分，其余部分是不会发生改变，

2.在react中每个compont链接到每个element，以mount-point作为一个parents容器

3.JSX:可以将html-ish嵌入到javascript中

4.Component：当我们使用reactDom中的render方法的时候会有两个参数存在第一个是需要redner的Component，第二个是需要加入的dom的目标节点。

5.createClass可以创建一个或者多个自定义Component。

6. text/jsx与text/babel的区别：如果要想运行jsx语法必须要加入JSXTransformer.js这个头文件，不然无法解析jsx语法。

7. 记得语法正确啊！！！！少一个逗号都要检查半天！！！

8.props：当我们定义Component时，想要加入属性时可以使用props,this.props可以在render方法中render动态数据

二. spec,lifecycle, state:

生命周期方法：

componentWillMount：在服务器端和客户端render之前调用一次

componentDidMount：仅仅在客户端render之后

shouldComponentUpdate：判定Component是否需要被更新

componentWillUnmount：在Component被挂载之前调用

状态：

每个Component都有state对象和props对象，对状态进行改变使用的方法是setState会触发UI的更新，并且和react进行交互。可以利用getInitialState方法来设置Component的初始状态

三. Event:

react同时建立了一个事件通过浏览器的事件系统：

（一定要注意方法的大小写，这个一定不能错，要不就更加像新手了）

react中的事件可以通过setState将react的逻辑和UI中的界面进行联系。

四.unidirectional data flow

不定向数据流：在react中，是通过props和states来对应用数据进行不定向传输的，这意味着父类的Component管理状态，并且通过props来向下传输。state将通过setState进行更新，并且刷新UI，其结果并且会向下传给子模块，通过this.props

这段Component代码分为三个部分：

第一个部分是filterList的方法，更新搜索结果并且通过setState对result进行更新。

第二部分是getInitialState和ComponentWillmount,对Component之中的内容进行初始化

第三部分是list子组件，用来显示搜索后的结果。

var FilteredList = React.createClass({
  filterList: function(event){
    var updatedList = this.state.initialItems;
    updatedList = updatedList.filter(function(item){
      return item.toLowerCase().search(
        event.target.value.toLowerCase()) !== -1;
    });
    this.setState({items: updatedList});
  },
  getInitialState: function(){
     return {
       initialItems: [
         "Apples",
         "Broccoli",
         "Chicken",
         "Duck",
         "Eggs",
         "Fish",
         "Granola",
         "Hash Browns"
       ],
       items: []
     }
  },
  componentWillMount: function(){
    this.setState({items: this.state.initialItems})
  },
  render: function(){
    return (
      <div className="filter-list">
        <input type="text" placeholder="Search" onChange={this.filterList}/>
      <List items={this.state.items}/>
      </div>
    );
  }
});

var List = React.createClass({
  render: function(){
    return (
      <ul>
      {
        this.props.items.map(function(item) {
          return <li key={item}>{item}</li>
        })
       }
      </ul>
    )  
  }
});