从零react从入门到放弃

---

从零react从入门到放弃

简介：react是Facebook出的一款针对view视层图的library(库)，主要使用单向数据流的方式进行数据展示。react拥有较高的性能，代码逻辑非常简单，越来越多的人已经开始关注和使用他

---

React特点

• 1.声明式设计——react采用声明范式，可以轻松描述应用。
• 2.高效——React通过对DOM的模拟，最大限度地减少与DOM的交互。
• 3.灵活——React可以与已知的库或框架很好地配合。
• 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
• 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
• 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

---

React的安装

• 可直接安装，也可直接使用

1. 直接使用(也可在中文官网下载最新版本)

<script src=" https://cdn.bootcss.com/react/16.10.2/umd/react.development.js">script>
<script src="https://cdn.bootcss.com/react-dom/16.10.2/umd/react-dom.development.js">script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js">script>

2. 通过npm或yarn使用React
   国内使用npm速度很慢，可以使用淘宝镜像cnpm命令行工具来代替npm

• npm install -g cnpm --registry=https://registry.npm.taobao.org
• npm config set registry https://registry.npm.taobao.org

npm (npx 或 cnpm) i create-react-app -g # 全局安装脚手架
create-react-app XXX # 创建项目 (XXX项目名称)
npm start # 启动项目
# or
yarn start # 启动项目

---

script 的type 属性指定为text/babel

• babel:讲es6转为es5解析jsx
• jsx：是一种语法糖
  • Jsx是JavaScript扩展的意思 相当于js+html
  • Jsx不是必须的，但是用jsx可以提高效率
• Jsx注意事项
  A. 对象不能直接渲染,数组以字符串的形式进行渲染
  B. jsx中 class 改为className
  C. 事件的首字母要大写 onXxx 形式
  D. value改为defaultValue
  E. checked改为defaultChecked
  F. for改为htmlFor
  G. style写对象
  H. {/注释/}

---

class定义的组件

class定义的组件可以设置局部状态
在使用的时候需要注意this指向的问题
每一个class定义的组件都需要一个render方法，用来表示在页面中显示的内容

     class Counter extends React.Component {
        constructor() {
          super();
          this.state = {
            count: 1
          };
        }
        render() {
          return (
            <button
              onClick={() => {
                this.setState({ count: this.state.count + 1 });
              }}
            >
              计数值({this.state.count})
            </button>
          );
        }
      }
      ReactDOM.render(<Counter />, document.querySelector("#app"));

---

function 定义的组件

优势：1.通过function定义组件的写法更加js 2.没有this指向问题 3.代码结构简单，代码量小

const {useState} = React
function Counter(){
  // useState可以在function定义的组件中设置局部状态
  // 返回两个值，
  //    1.局部状态的名字
  //    2.改变状态的方法
  const [count,setCount] = useState(0)
  return (
    <button onClick={()=>setCount(count+1)}>计数值：{count}</button>
  )
}

---

…未完待续