React学习之路

React

react 是Facebook开发的一款js库，因为其响应速度快，支持跨平台，所以被广大前端开发者所采用

React主要组成

1）JSX（JacascriptXML）
2）组件（Component）
3）路由（Route）
4）状态管理
5）第三方插件

hello world

从0开始创建一个hello world 文件的话只需引入三个文件即可成功搭建环境

    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.js"></script>

    <div id="box"></div>

    <script type="text/babel">
      ReactDOM.render(<h2> hello world </h2>, document.getElementById("box"));
    </script>

JSX

JSX是js的一种扩展语法，在react中是使用这种语法渲染UI信息

• JSX支持嵌入表达式，使用花括号 { } 把任意js表达式嵌入其中
• JSX是Javascript：比起 HTML, JSX 更接近于 JavaScript, React DOM 使用驼峰(camelCase)属性命名约定。(html为全小写)
• JSX防注入攻击：在渲染之前, React DOM 会格式化(escapes) JSX中的所有值。防止 XSS(跨站脚本) 攻击。
• JSX 底层原理：React.createElement()

组件

• React中的组件分为两种 类组件和无状态组件

	<script type="text/babel">
      class App extends React.Component {
        render() {
          return <h2>这是一个类组件</h2>;
        }
      }

      ReactDOM.render(<App />, document.querySelector("#box"));
    </script>

	const App = () => {
         return (
           <div>
             这是一个无状态组件
           </div>
         );
       };

props

• 属性是只读的：不管用哪种方式声明组件，都无法修改自身props
• 属性是外部控制的的：组件内部不确定属性从哪设置
• 稳定性：对于同样的输入，始终可以得到相同的结果

state

• 由组件本身完全控制
• 使用setState修改：
  1） 内部调用render
  2） 支持异步
  3） 支持更新合并state

生命周期事件

挂载阶段

• constructor
  类组件的构造函数，挂载阶段第一个执行的钩子函数，实例化组件，在构造函数中获取props，设置state属性
• static getDerivedStateFromProps( props , state ) 不常用
  将父组件传递的值通过props映射到state中，这个函数不能通过this访问到class的属性
• render
  组件渲染真实DOM所用的钩子函数
• componenDidMount
  组件挂载完成执行的钩子函数，第一次render后，可设置setState

更新阶段

• static getDerviedStateFromProps( props , state ) 不常用
• ShouldComponentUpdate( nextProps , nextState )
  返回一个布尔值，返回true会render，false则不会，该函数可以用来优化性能，减少不必要的渲染
• getSnapshotBeforeUpdate( prevProps , prevState )
  该函数必须跟componentDidUpdate一起使用
• componentDidUpdate( prevProps , prevState , snapshot )
  此函数在render后调用，修改state后会造成死循环

卸载阶段

• componentWillUnmount
  组件卸载前调用该函数

受控组件与非受控组件

1） 受控组件：通过react中的state控制组件的数据变化，受控组件需要绑定onChange()事件，通过该事件来改变state中的数据
2） 非受控组件：不需要通过state中的数据控制，可以通过ref属性来操作真实的DOM

组件之间传值

• 父传子 通过props属性

render() {
    var { list } = this.props; //t 父组件传子组件用props
    return (
      <div>
        <ul>
          {list.map((item, index) => {
            return (
              <li key={index}>
                姓名：{item.name}--年龄：{item.age}
                <button onClick={this.remove.bind(this, item.id)}>删除</button>
                <button onClick={this.edit.bind(this, [index, item.id])}>
                  修改
                </button>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }

• 子传父 通过父组件传递的方法，把数据写在参数中

		<Text
          nameOnload={this.nameOnload}
        />
        {/*父组件传方法给子组件*/}

    this.props.nameOnload(e.target.value); //t 子组件向父组件传姓名

路由

使用react创建单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明

安装

npm i react-router-dom --save

基本使用

import { Route, NavLink, Redirect, Switch, withRouter } from "react-router-dom";

	return (
      <div>
        {/* <NavLink to="/test1">界面1</NavLink>
      <NavLink to="/test2">界面2</NavLink> */}

        <Switch>
          <Route path="/home" component={Home} />
          <Route path="/sort" component={Sort} />
          <Route path="/shop" component={Shop} />
          <Route path="/login" component={Login} />

          {/* //t 用高阶组件做路由判断 */}
          <Route path="/person" component={My} />

          {/* <Myrouter path="/person" component={My} /> */}
          {/* //t 进入Myrouter 做路由判断 */}
          <Redirect from="/" to="/home" exact />
          <Route component={NotFound} />
        </Switch>
        <ul
          style={{
            display: this.state.visible ? "flex" : "none",
            position: "fixed",
            bottom: "0",
            width: "100%",
            justifyContent: "space-around",
            height: "1rem",
          }}
        >
          <li>
            <NavLink to="/home">
              <span className="iconfont icon-shouye"></span>
              首页
            </NavLink>
          </li>
          <li>
            <NavLink to="/sort/sort1">
              <span className="iconfont icon-fenlei"></span>
              分类
            </NavLink>
          </li>
          <li>
            <NavLink to="/shop">
              <span className="iconfont icon-gouwuche"></span>
              购物车
            </NavLink>
          </li>
          <li>
            <NavLink to="/person">
              <span className="iconfont icon-wode"></span>
              我的
            </NavLink>
          </li>
        </ul>
      </div>
    );
        就这样 实现了几个页面的路由跳转 是不是很简单呢？

路由传参

且听下回分解OvO