react基础学习

来源：互联网发布：兄弟连it 编辑：程序博客网时间：2024/05/24 03:35

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'));

阅读全文

0 0