迅速学习React 笔记 day1

突发奇想追个新，选择react当自己小页面的前端。（当然也不是那么新了）
作为一个前端白痴只能从hello world开始一点点写
好在react官方文档极度友好，几个步骤就能搭出来个简易的开发环境，

1.开发环境

安装nodejs

#windows安装 直接再官方下载稳定版的nodejs
https://nodejs.org/en/

2.vscode 及各种插件略

因为不知道用什么插件好，胡乱下载了下面这些个插件

Debugger for Chrome
ES7 React/Redux/GraphQL/React-Native snippets
React Redux ES6 Snippets

Debugger for Chrome这个插件很神奇居然可以debug chrome

3.安装 react

参照这个

https://reactjs.org/docs/create-a-new-react-app.html#create-react-app

npx create-react-app my-app
cd my-app
npm start

4. hello world

react写前端很奇特的方式，和写html js操作dom感受完全不同，感觉有点类似于面向对象编程语言，完全把页面切割成小块，一片一片拼接

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

4. JSX表达式

也有些特点可以定义对象，可以封装dom，dom中还能执行方法，还可以在生成dom的方法中做判断，感觉很灵活

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};
//user 不为空Hello, Harper Perez
//user 为空  Hello, Stranger.
const element = getGreeting(user);

ReactDOM.render(
  element,
  document.getElementById('root')
);

//JSX Represents Objects
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

5. 更新渲染元素

1) 陋比古方法

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

1) 牛比新方法

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>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

6 简述组件，Props,State, 生命周期

1）组件

直接用js function

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

用 es6语法react组件类React.Component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

开始渲染&组合，可以看出react最核心的用法应该就是把各种东西组件化了，定义好组件后可以各种组合。还能让组件继承其他组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

ps es6应该是js的一种比较新的语法，暂时不深入研究能写就行，管他es还是js

2）Props

Props 的只读性
引用下官网 props就是定义不可变的值的属性，如果希望可变就用state

Whether you declare a component as a function or a class, it must never modify its own props.

举个栗子🤞

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

3）State

State 类似与面向对象语言的私有变量，如果想做一些对象内可见可变的属性可以用这个，
官方告知了三个使用时的注意点

不要直接修改state 而是通过setState方法

this.setState({comment: 'Hello'});

State 的更新可能是异步的
所以不要依赖state属性的值来更新下一个状态
解决办法

让setState接收一个函数不是对象，更新时可以调用函数。

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

两个函数作用相同
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

State 的更新会被合并

举个官方例子

 constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

4）生命周期方法

  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
//渲染后执行
  componentDidMount() {
  }
//卸载时执行
  componentWillUnmount() {
  }

最后编辑于：2021.05.07 21:48:16