react基础学习

最新推荐文章于 2017-08-25 11:46:52 发布

qq小小布丁

最新推荐文章于 2017-08-25 11:46:52 发布

阅读量547

点赞数

分类专栏： react 文章标签： react前端框架

本文链接：https://blog.csdn.net/u012841667/article/details/73017234

版权

react 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

react安装
react官网

<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

react.min.js核心库
react-dom.min.js提供与DOM相关的功能
babel.min.js内嵌JSX的支持

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

在浏览器中打开http://localhost:3000/

2.JXS
- 代码嵌套多个html标签时，使用div包裹
- 添加自定义属性需要使用data-前缀
- 表达式使用花括号{}
- JSX中不能使用if-else，可以使用三元运算
- react推荐使用内联样式，class改为className，for改为htmlFor。元素数字后自动添加px
- 标签内部注释需要花括号{}，标签外不需要
- 允许在末班在插入数组，数组会自动展开所有成员
- JSX中html标签使用小写，自定义的组件使用大写字母开头

3.react组件
使用React.createClass方法生成组件类，组件名必须要使用大写字母开头。
ReactDOM.render(<组建名 />);组件名是用单标签< />即带斜杠”/”的尖括号包围的。

4.state状态
react组件可以看成是一个状态机，通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

5.props属性
props是不可变的，子组件只能通过 props 来传递数据。
通过getDefaultProps方法，设置默认值，

组合使用 state 和 props ，可以在父组件中设置 state，并通过在子组件上使用 props 将其传递到子组件上。

通过使用propTypes实现验证， React.PropTypes提供很多验证器 (validator) 来验证传入数据是否有效当向 props 传入无效数据时，JavaScript 控制台会抛出警告。

propTypes: {
    title: React.PropTypes.string,
    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
  },

6.组件API
设置状态：setState；
替换状态：replaceState，replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除；
设置状态：setProps，props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中；
替换状态：replaceProps；
强制更新：forceUpdate方法，适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法通知React需要调用render()；
获取DOM节点：findDOMNode；
判断组件挂载状态：isMounted，用于判断组件是否已挂载到DOM中，可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。

7.生命周期：初始化、运行时、销毁
（1）初始化
- getDefaultProps：初始化组件属性的默认值，只调用一次
- getInintialState：初始化每个实例的状态
- componentWillMount：在渲染前调用，可以修改状态
- render：渲染组件时
- componentDidMount : 在render完成后组件渲染到页面时触发，之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

（2）运行阶段
- componentWillReceiveProps ：在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
- shouldComponentUpdate ：返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。返回false时阻止render调用。
- componentWillUpdate：在组件接收到新的props或者state但还没有render时被调用。但不能修改props和state。
- render：渲染组件。
- componentDidUpdate ：在组件完成更新后立即调用。

（3）销毁阶段
- componentWillUnmount：在组件从 DOM 中移除的时候立刻被调用。
这里写图片描述
8.表单和事件
onChange方法和onClick方法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>菜鸟教程 React 实例</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
    var Content = React.createClass({
      render: function() {
        return  <div>
                <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /> 
                <h4>{this.props.myDataProp}</h4>
                </div>;
      }
    });
    var HelloMessage = React.createClass({
      getInitialState: function() {
        return {value: 'Hello Runoob!'};
      },
      handleChange: function(event) {
        this.setState({value: event.target.value});
      },
      render: function() {
        var value = this.state.value;
        return <div>
                <Content myDataProp = {value} 
                  updateStateProp = {this.handleChange}></Content>
               </div>;
      }
    });
    ReactDOM.render(
      <HelloMessage />,
      document.getElementById('example')
    );
    </script>
  </body>
</html>

在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上

9.Refs
ref可以用来绑定到 render() 输出的任何组件上

var MyComponent = React.createClass({
  handleClick: function() {
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();
  },
  render: function() {
    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

qq小小布丁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react基础学习

react安装 react官网<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss
复制链接

扫一扫

专栏目录