前端框架-React

1.简介

为何要学React？

1.首先因为之前学习过Vue，也体验到Vue框架的便捷，这是基于实时的渲染效果。
2.至于React，有听过Vue的框架自然也听过React，作为前端框架的两大巨头，也要简单了解过，方便以后更换技术不再花很多时间去学习基础。
附加react官网

 [React官网](https://reactjs.bootcss.com/docs/code-splitting.html)

怎么学习呢？

早期，学习编程基本都是看视频，跟着视频慢慢琢磨。后来接触博客学习之后，本次将采取新的学习方式，看官方文档学习，刚好官方文档有小游戏的实践，先总体浏览React的总体框架，之后再编写代码，然后用博客进行总结归纳。至于视频学习只基于有些看不懂的点，这样一来可能会减少学习时间。

2.JSX

其实也不是什么玩意，就像一种翻译语言一样

const element = <h1>Hello, world!</h1>;

这种有参数，有html代码的写法就是jsx。
套用模板

const element = <modelName />

3.元素渲染

<div id = "root"></div>

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

以上就是元素渲染，通过ReactDom 的render方法来将渲染元素与html文本标签的元素进行绑定.而vue则是利用直接嵌套在html文本。两者还是有区别的。

4.组件

组件在学习Vue其实并不陌生，React也是基于组件的，实现组件方法目前有两种方式。一种是无构造函数的组件，一种是可有可无构造函数组件。

1. 函数式，无构造函数，这种只是方便撰写

function Game(props){
	return 
	<button>我是个按钮</button>
}

2. 默认组件，这种比较复杂点，但是可以添加很多函数

class Game extends React.Component{
	//可有可无构造函数，与java类似，你懂的！！
	render(){
		return(
			// 模板
		) 
	}
}

5.props

props全称为properties，就是参数列表，一般为父组件传给子组件的参数，跟vue的类似。

function Game(props){
	return 
	// 这里的value是由父组件传给子组件的参数
	<button>{props.value}</button>
}

6.state

这个是组件的私有属性，就是vue实例对象中的data一样道理。但是不同的是，在调用构造函数初始化的时候，比vue复杂一点，就是要使用super（props）

class Game extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
           	  // 这里添加初始参数
              xIsNext: true,
          }
      }
}

之后要更改参数时，在同一组件下，

利用this.state.xIsNext调用
用this.setStates({xIsNext:""})更改

7.事件监听

事件监听相对比较复杂一点，可以为同组件自己编写事件，用lambda表达式，另一种为父组件传递给子组件
默认：

<button onlick={}> </button>

父组件传递子组件

function Square(props){
    return 
    <button onclick={props.onclick}>
        {props.value}
    </button>
}
class Board extends React.Component {
 
    render() {
      // JSX表达式
      return <Square 
                onclick = { () => alter("这里把整个参数传给子组件")}
            />;
    }
}

8.不可变形

react官网推荐，在我们给数组或者state修改值时不建议我们直接修改值，而是通过复制的形式，这样有利于以后历史版本等

9.条件渲染

条件渲染就是if 等，&& || 呀，不做过多描述。

10.列表与key

这是官方文档的，主要是利用数组的map映射+lambda表达式，key作为表示，跟vue的index类似好像，默认利用number.id使用。

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

11.表单

这里相对vue来说，比较弱一点点，vue使用v-model标签即可。而react则利用受控组件来实现。这里表单有很多类型，文件，选择，填空等，具体用到再深究，这里只展现一种

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('提交的名字: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

12.组件与继承

组件可以使用父组件向子组件传递参数或者渲染html
利用props.children参数即可

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {login: ''};
  }

  render() {
    return (
      <Dialog title="Mars Exploration Program"
              message="How should we refer to you?">
        <input value={this.state.login}
               onChange={this.handleChange} />
        <button onClick={this.handleSignUp}>
          Sign Me Up!
        </button>
      </Dialog>
    );
  }

  handleChange(e) {
    this.setState({login: e.target.value});
  }

  handleSignUp() {
    alert(`Welcome aboard, ${this.state.login}!`);
  }
}

13.状态提升（难点）

一开始观看，看不懂。
就是从多组件下，根据单组件下的值变化，其余组件也相应变化时，可以提取为父组件的参数来代替使用。总结就是这句话，具体可以根据文档了解。

14.React高级和Hook会在下一次进行撰写

15总结

这一次学习，进行学习方式的转变。相对而言，很多视频也是根据文档来出的，前提是对文档理解能力要强，我理解能力一般，所以学习起来比较吃力，比如状态提升，一开始看我实属看不懂，但慢慢琢磨也是可以了解大概。假如文档真的看不懂。可以看视频了解一些难以理解的代码块。

其实react和vue有类似的地方，也有不同的地方。这也说明学习要多方位学习。其实vue也是我上课时间一点点看文档啃下来的，也有一些难以理解。

其实前端而言，有基于数据存储的，页面跳转的，路由转换的，以及异步请求，数据渲染的，大概的项目都是用到这些板块。

唯一缺点是：
遇到比较难点，我总是喜欢跳着看，这对深度学习是不好的，学习速度还是相对较慢，下次遇到困难还是想办法解决，而不是跳。
优点：
在正式学习react的前一晚上，我已经初步浏览react的官网，看看react的整体架构，有了了解，在加上今天早上边敲边了解，到下午撰写此博客。相对观看视频而言，快了不少。但也有弊端，有些点没有比视频了解得更深沉一点，所以还是结合使用才行。