之前的文章里面我根据一些材料，整理了很多相关的基础知识。但是都是相当理论化的。现在开始是完全记录我的react学习的一个笔记整理。

• 1、react的map方法自实现：

  首先我们来看看react原生的map是怎么运用的：

  import React from 'react';
  import EactDOM from 'react-dom';
  
  <!--<div>
      <span>1</span>
      <span>2</span>
      <span>2</span>
  </div> -->
  
  let spans = [
  <span>1</span>,
  <span>2</span>,
  <span>3</span>
  ];
  let divs = React.Children.map(spans, (span,index) => <div key={index}>{span}</div>);
  ReactDOM,render(<div>{divs}</div>, 
  document.getElementById('root'));
  <!--以下我们自己来模拟实现以下-->
  <!--首先我们看这个官方给的map函数，我会想到数组的map函数.那么我们 不妨来试试看呢！-->
  function map(children, callback) {
      return children.map(callback)
  }
  let divss = map(spans, (item, i) => <div key={i}>{item}</div>);
  ReactDOM,render(<div>{divss}</div>, 
  document.getElementById('root'));
  是不是很简单。其实这只是我学到的一个小的技能点。
  复制代码

• 元素更新渲染问题

  关于元素更新渲 首先默认情况下React元素是不可更改的，也就是说一个元素创建了，我们就不回去修改他了。那么问题来了，往往是我们希望界面元素进行修改替换等等，比如动画。既然如此我唯一想到的就是每次创建一个新的元素放到页面中去。

  1号方案失败告终。
  function tick() {
      let ele = <div>{new Date().toLocalString()}</div>;
      return ele
  } 
  setInterval(()=> {
      //Cannot assign to read only property 'children' of object
      console.log('element.props', element.props);
      element.props.children = new Date().toLocaleString()
  })
  React.DOM.render(<Tick/>, 'root')
  
  2号方案勉强实现
  setInterval(()=> {
      let ele = <div>{new Date().toLocalString()}</div>;
  <!--请允许我偷个懒 id在js中是可以直接用的鉴于ID一般情况侠士唯一的-->
      React.DOM.render(element, 'root')
  }, 1000)
  复制代码

  思考：

  1、上面的方式确实让我们实现的修改页面元素的，但是怎么看也都不是很好的解决方式。看起来会不断的进行重绘页面

  2、react元素是不可变的，这一点我想到了。对象冻结及其属性冻结，即Object.freeze:方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze()返回和传入的参数相同的对象。其本质就是将对象的writable属性重置为false.

• 外加一个知识点

  • 函数式编程的概念：

  什么叫作纯函数： 1、在函数体内部不能改变传入的参数； 2、相同的参数一定要返回相同的值； 3、不能修改作用域变量之外的值。

  <!--ATM机取钱操作-->
  1、
  function withdraw(account, amount) {
      account.balance -= aomunt;
  }
  withdraw({name: 'cl', 'balance: 1000'}, 100)
  2、
  function add(a, b) {
      reutrn a+b
  }
  add(1,2);
  add(2,3);
  3、
  function sum(a,b) {
      let c = 10;
      c = 20;
      return a+b+c;
  }
  4、
  function Welcome(props) {
      return <div>hello, {props.name}</div>
  }
  复制代码