vue开发者react学习笔记（一）

one_day
260 阅读3分钟

做了很久的vue技术栈，对于react不是很熟悉，看了教程慢慢就忘了，所以这次写一次笔记。

首先写第一个最简单的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);
</script>

</body>
</html>

可以看到除了babel之外，react有两个核心库，react.js 和react-dom.js。

1  react-dom顾名思义就是负责DOM渲染的。上面helloworld例子里ReactDom.render方法负责将元素和html已定义元素绑定渲染。

2  然后定义并使用一个组件，组件生命继承React.Component,通常return一个html元素

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}
 
setInterval(tick, 1000);

3 对应于Vue里面的data,react里面是state状态机

在组件构造函数里面this.state生命需要的数据节点，

然后通过this.setState({date:'234'})方法更新数据，更新数据后react会将数据流渲染更新到DOM元素上。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);

4 props,vue里面同样的使用方式。 对于父子组件传递数据通过props获取父组件传递的数据，单向数据流。父组件数据变化时会传递到子组件，并渲染子组件。

function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="Runoob"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

5  vue 通过生命周期钩子，react也有。vue常用的created,mounted。react对应componentDidMount

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
 
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
 
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
 
  tick() {
    this.setState({
      date: new Date()
    });
  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);

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

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

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

5  事件处理，区别于Vue的代码结构，handleClick方法不必写于methods对象里面，直接写在类里面即可，当然Vue3.0之后也开始支持这种写法（为了更好将data和method放在一起，避免数据和逻辑分开）。

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

6 条件渲染，这一点和Vue的区别最大了，vue通常是通过模板语法，html和js逻辑分开，但是react采用jsx,js和html混合写法，怎么说呢，各有利弊。react写法更加灵活，vue写法更加接近于传统html js分离的开发

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}
 
ReactDOM.render(
  // 尝试修改 isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('example')
);

下面是一个列表循环的写法，在vue里面我们会采用v-for的模板写法，但是react直接混合写法，当然react也推荐列表添加key,类似于vue,因为这样对于虚拟DOM渲染来说，对比虚拟DOM的时候可以更快。因为vue和react都采用了虚拟DOM。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
  <li>{numbers}</li>
);
 
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('example')
);

6 生命周期

件的生命周期可分成三个状态：

  • Mounting：已插入真实 DOM
  • Updating：正在被重新渲染
  • Unmounting：已移出真实 DOM

生命周期的方法有：

  • componentWillMount 在渲染前调用,在客户端也在服务端。

  • componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

  • componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

  • shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
    可以在你确认不需要更新组件时使用。

  • componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

  • componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

  • componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

7 ref 

这个和vue里面类似，都可以获取dom对象

<input ref="myInput" />
avatar
文章
阅读
粉丝