一起学react day1

2019独角兽企业重金招聘Python工程师标准>>>

之前一直是写的jsp页面，应为项目需要，最近开始学习react，有问题请多指教

声明式

React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。

以声明式编写UI，可以让你的代码更加可靠，且方便调试。

组件化

创建好拥有各自状态的组件，再由组件构成更加复杂的界面。

无需再用模版代码，通过使用JavaScript编写的组件你可以更好地传递数据，将应用状态和DOM拆分开来。

一次学习，随处编写

无论你现在正在使用什么技术栈，你都可以随时引入 React 开发新特性。

React 也可以用作开发原生应用的框架 React Native.

 

组件

react组件使用一个名为render()的方法，接收数据作为输入，输出页面中对应展示的内容。

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  mountNode
);

 

上面这个示例中类似XML的写法被称为JSX. 输入的数据通过 this.props 传入 render() 方法。

react-dom react是虚拟dom（文档对象模型），reactDOM的作用就是将虚拟dom渲染成实际DOM，reactDOM其它作用后面在看，自己暂时没看。

 this.props 访问传入数据

this.state 访问内部状态，通过this.state获取的数据改变后，组件会调用render()方法重新渲染页面

 

下面这个官方demo中的应用

使用props和state 创建一个ToDo应用

 

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Add #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

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

  handleSubmit(e) {
    e.preventDefault();
    if (!this.state.text.length) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(prevState => ({
      items: prevState.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

ReactDOM.render(<TodoApp />, mountNode);

在组件中使用第三方库

直接引入 import XXX from xxxx

根据官方文档中的入门教程开发一个井字游戏

 

转载于:https://my.oschina.net/u/3643058/blog/3038988