title: React常用知识点快速查找
author: 作者
top: false
toc: false
date: 2019-07-30 13:39:35
tags:
按照Vue 的学习思路，找到对应的 react 中的实现方式
https://reactjs.org.cn/doc/hello-world.html
1. 基础
-
v-if 如何实现
-
方法一：直接 if 判断
//定义基础组件 function Orange(){ return <h1>我喜欢橘子</h1> } function Apple(){ return <h1>我喜欢苹果</h1> } //进行选择 function GetFavor(props){ const favor = props.fruit; if(favor=='orange'){ return <Orange/> }else{ return <Apple/> } } //渲染 ReactDOM.render( <GetFavor fruit='orange'/>, document.getElementById('root') )
-
-
&& 和 || 的用法
// A&& <h1> 当 A 为真 则 执行 <h1> function Cook(props){ var p = props.process; return <div> <h1>欢迎你来到厨房</h1> { p=='有米了'&& <h1>{p},开始煮饭</h1> } { p=='没有米了'&& <h1>{p},快去买米</h1> } </div> } ReactDOM.render( <Cook process='有米了'/>, document.getElementById('root') )
-
三目运算
function ThirdOperator(props){ var f = props.fruit; //三元运算符 return <h1> {f=='orange'? '橘子':'其他'} </h1> } ReactDOM.render( <ThirdOperator fruit='orange'/>, document.getElementById('root') )
-
避免渲染优化
function Warnings(props){ if(props.isRight=='true'){ //通过 null 避免如下渲染 return null; } return <div> <h1>请输入正确密码</h1> </div> } ReactDOM.render( <Warnings isRight='false'/>, document.getElementById('root') )
-
v-for 如何实现 使用map方法
function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <ListItem key={number.toString()} value={number} /> ); return ( <ul> {listItems} </ul> ); }
-
computed 如何实现
react 中没有 计算属性
react 基于传进来的数值 修改，直接使用 func 方法
-
还有一种 直接 用 getter注意没有缓存
// 推荐的做法：通过getter而不是函数形式，减少变量 get renderFullName () { return `${this.props.firstName} ${this.props.lastName}`; } render () { <div>{ this.renderFullName }</div> }
-
插件貌似没有什么人气，建议不用
xxx
-
watch 如何实现（貌似没有）
当数据变化 会调用 生命周期方法
componentWillUpdate(object nextProps, object nextState) componentDidUpdate(object prevProps, object prevState)
-
如何 实现点击事件
class Title extends Component { handleClickOnTitle (word, e) { console.log(this, word) } render () { return ( <h1 onClick={this.handleClickOnTitle.bind(this, 'Hello')}>React 小书</h1> ) } }
-
react 中 ref 用法
class MyComponent extends React.Component { handleClick() { // 使用原生的 DOM API 获取焦点 this.refs.myInput.focus(); } render() { // 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs return ( <div> <input type="text" ref="myInput" /> <input type="button" value="点我输入框获取焦点" onClick={this.handleClick.bind(this)} /> </div> ); } } ReactDOM.render( <MyComponent />, document.getElementById('example') );
-
props 的传递 和 类型校验 react的不同版本有差异
https://www.runoob.com/react/react-props.html // 默认值 HelloMessage.defaultProps = { name: 'Runoob' }; // 传值传输 MyComponent.propTypes = { // 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的 optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, // 可以被渲染的对象 numbers, strings, elements 或 array optionalNode: React.PropTypes.node, // React 元素 optionalElement: React.PropTypes.element, // 用 JS 的 instanceof 操作符声明 prop 为类的实例。 optionalMessage: React.PropTypes.instanceOf(Message), // 用 enum 来限制 prop 只接受指定的值。 optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), // 可以是多个对象类型中的一个 optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]), // 指定类型组成的数组 optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), // 指定类型的属性构成的对象 optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), // 特定 shape 参数的对象 optionalObjectWithShape: React.PropTypes.shape({ color: React.PropTypes.string, fontSize: React.PropTypes.number }), // 任意类型加上 `isRequired` 来使 prop 不可空。 requiredFunc: React.PropTypes.func.isRequired, // 不可空的任意类型 requiredAny: React.PropTypes.any.isRequired, // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。 customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error('Validation failed!'); } } } }
- xxx
2.如何传值
-
简单 父子 传值
子组件调用父组件的函数，来处理，函数作为 props 传递到子组件中
//子组件
var Child = React.createClass({
render: function(){
return (
<div>
请输入邮箱：<input onChange={this.props.handleEmail}/>
</div>
)
}
});
//父组件，此处通过event.target.value获取子组件的值
var Parent = React.createClass({
getInitialState: function(){
return {
email: ''
}
},
handleEmail: function(event){
this.setState({email: event.target.value});
},
render: function(){
return (
<div>
<div>用户邮箱：{this.state.email}</div>
<Child name="email" handleEmail={this.handleEmail.bind(this)}/>
</div>
)
}
});
React.render(
<Parent />,
document.getElementById('test')
);
- 复杂 传值
3. Redux 的使用
https://juejin.im/post/5b755537e51d45661d27cdc3
-
Action
用于改变store的数据，描述清晰
{ type: 'ADD_TODO', text: 'Go to swimming pool' } { type: 'TOGGLE_TODO', index: 1 } { type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' } /* * action 类型 */ export const ADD_TODO = 'ADD_TODO'; export const TOGGLE_TODO = 'TOGGLE_TODO' export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER' /* * 其它的常量 */ export const VisibilityFilters = { SHOW_ALL: 'SHOW_ALL', SHOW_COMPLETED: 'SHOW_COMPLETED', SHOW_ACTIVE: 'SHOW_ACTIVE' } /* * action 创建函数 */ export function addTodo(text) { return { type: ADD_TODO, text } } export function toggleTodo(index) { return { type: TOGGLE_TODO, index } } export function setVisibilityFilter(filter) { return { type: SET_VISIBILITY_FILTER, filter } }
xxx
-
Reducer
只是一个纯函数，接受 state 和 action，返回state
import { combineReducers } from 'redux' import { ADD_TODO, TOGGLE_TODO, SET_VISIBILITY_FILTER, VisibilityFilters } from './actions' const { SHOW_ALL } = VisibilityFilters function visibilityFilter(state = SHOW_ALL, action) { switch (action.type) { case SET_VISIBILITY_FILTER: return action.filter default: return state } } function todos(state = [], action) { switch (action.type) { case ADD_TODO: return [ ...state, { text: action.text, completed: false } ] case TOGGLE_TODO: return state.map((todo, index) => { if (index === action.index) { return Object.assign({}, todo, { completed: !todo.completed }) } return todo }) default: return state } } const todoApp = combineReducers({ visibilityFilter, todos }) export default todoApp
-
store
getState()方法获取 state；getState()方法获取 state；subscribe(listener)注册监听器;subscribe(listener)返回的函数注销监听器import { createStore } from 'redux' import todoApp from './reducers' let store = createStore(todoApp) // --------------------------- import { addTodo, toggleTodo, setVisibilityFilter, VisibilityFilters } from './actions' // 打印初始状态 console.log(store.getState()) // 每次 state 更新时，打印日志 // 注意 subscribe() 返回一个函数用来注销监听器 const unsubscribe = store.subscribe(() => console.log(store.getState()) ) // 发起一系列 action store.dispatch(addTodo('Learn about actions')) store.dispatch(addTodo('Learn about reducers')) store.dispatch(addTodo('Learn about store')) store.dispatch(toggleTodo(0)) store.dispatch(toggleTodo(1)) store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED)) // 停止监听 state 更新 unsubscribe();
xxx
