- 基本引入 js，最后的 <script> 标签是text/babel是因为JSX语法
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>//核心库
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>//react提供与 DOM 相关的功能
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>//转换成浏览器可以识别的语言
<script type="text/babel">
// ** Our code goes here! **
</script>
- 什么是 jsx?
JSX语法非常适合表示嵌套的HTML元素
const element = <h1>Hello, world!</h1>;
小括号()把JSX包起来 包括{}也是jsx语法
因为JSX更接近于javascripte而不是html，所以ReactDom标签的参数名用驼峰命名法命名而不是html标签的命名
JSX实际上就是Javascript中的对象
Babel解释JSX的时候会调用React.createElement()这个函数 - ReactDOM.render()
是 react 最基本的方法
用于将模板转为 HTML 语言，并插入指定的 DOM 节点 - 创建一个组件
原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
- React State(状态)
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
这通常被称为自顶向下或单向数据流。 任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。 - React Props
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。 - React 事件处理
React 事件绑定属性的命名采用驼峰式写法，而不是小写。
在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为， 你必须明确的使用 preventDefault。
<button onClick={activateLasers}>
激活按钮
</button>
要记得绑定 this，不然就用 es6 的箭头函数
this.handleClick = this.handleClick.bind(this);
- React 条件渲染
React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。
隐藏的话使用 warn 属性 - React 列表 & Keys
使用 map() 方法遍历数组 - React 组件 API
设置状态：setState
替换状态：replaceState
设置属性：setProps
替换属性：replaceProps
强制更新：forceUpdate
获取DOM节点：findDOMNode
判断组件挂载状态：isMounted - React 组件生命周期
componentWillMount在渲染前调用,在客户端也在服务端。
componentDidMount: 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillReceiveProps在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除之前立刻被调用。 - React AJAX
React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。 - React 表单与事件
网友评论